CSS sin(), cos(), tan() Demo - Online Animated Trig

These are CSS mathematical functions introduced in CSS Values Level 4. They compute trigonometric values directly in CSS, accepting angle parameters (deg, rad, grad, turn) and returning unitless numbers. For example, sin(30deg) returns 0.5. They're typically used inside calc() expressions for layout calculations, animations, and positioning.

Chrome 111+ (March 2023), Firefox 108+ (Dec 2022), Safari 15.4+ (March 2022), and Edge 111+. As of 2025, global coverage exceeds 95%. These functions are safe for production use with appropriate fallbacks.

The key difference: CSS sin()/cos()/tan() accept angles (with explicit units like deg, rad), while JavaScript's Math.sin() expects radians. In CSS, sin(90deg) = 1 is intuitive. In JS, you'd need Math.sin(Math.PI / 2). CSS functions also integrate seamlessly with calc() and CSS custom properties.

• Circular layouts — position elements around a center point
• Oscillating animations — smooth back-and-forth motion
• Wavy decorations — sinusoidal borders or backgrounds
• Radial menus — arrange nav items in a circle
• Orbital effects — elements orbiting a central point
• Dynamic spacing — angle-based responsive calculations

You need to use @property to register a custom property that can be interpolated, then animate it with @keyframes. Example: register --angle as a <angle> type, animate from 0deg to 360deg, and use transform: translate(calc(sin(var(--angle)) * 100px), calc(cos(var(--angle)) * 100px)) for circular motion.

tan() has asymptotes at 90°, 270°, etc., where it approaches ±infinity. In CSS, tan(90deg) returns an extremely large value (≈ 1.63×10¹⁶ in practice). This can cause layout overflow or elements to disappear off-screen. Always constrain tan() values with clamp() or ensure your angles stay within safe ranges (e.g., -45° to 45°).

Yes! You can freely mix them: calc(sin(var(--a)) * 100px + cos(var(--b)) * 50px). This is powerful for creating complex motion paths. For circular motion, use sin() for X and cos() for Y (or vice versa depending on starting position). The functions return plain numbers, so multiply by a length unit to get usable CSS values.

All CSS angle units: deg (degrees), rad (radians), grad (gradians, 400 per circle), and turn (full rotations). Example: sin(0.5turn) = 0, sin(3.1416rad) ≈ 0, sin(180deg) = 0. Use whichever unit fits your mental model best!