1. Home
2. web
3. CSS Trigonometric Functions: Math in Your Stylesheets

CSS has evolved from a simple styling language into a powerful computation engine. The introduction of trigonometric functions in CSS Values and Units Module Level 4 – shipping in Chrome 111+, Firefox 108+, and Safari 15.4+ – marks a paradigm shift. Developers can now perform geometric calculations directly in stylesheets without preprocessors or JavaScript.

Function Reference and Syntax

Six trigonometric functions are now available in CSS:

Angle units include deg, rad, grad, and turn. Common pitfalls include forgetting units, division by zero in atan2, and domain errors with asin/acos inputs outside [-1, 1].

Wave Patterns and Oscillations

The sin() and cos() functions excel at creating wave effects. Here is a pure CSS wave animation:

@property --phase {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@keyframes phase-cycle {
  to { --phase: 360deg; }
}

.wave {
  animation: phase-cycle 2s linear infinite;
  transform: translateY(calc(sin(var(--phase)) * 20px));
}

The [-1, 1] output range maps to pixel values through calc(). Staggered animation-delay values on multiple elements create ripple effects.

Circular and Radial Layouts

The core formulas x = cx + r * cos(angle) and y = cy + r * sin(angle) enable circular layouts without JavaScript:

@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.dot {
  --x: calc(cos(var(--angle)) * 100px);
  --y: calc(sin(var(--angle)) * 100px);
  transform: translate(var(--x), var(--y));
}

Combined with @property for iterating angles, this technique powers radial menus, donut charts, orbit animations, and even spiral layouts where the radius changes as a function of the angle.

Animation Curves and Easing

Trigonometric functions produce easing curves beyond standard cubic-bezier:

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(calc(abs(sin(3.14 * var(--t))) * -30px)); }
}

The ease-in-out-sine curve equals sin((t * pi) / 2). Exponential decay multiplied by sin() produces natural spring and elastic animations. The tan() function creates asymptote-based effects – objects approaching a vanishing point.

Procedural Design with Custom Properties

Combining trig functions with @property unlocks procedural generation:

@property --seed {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.hero-bg {
  background: conic-gradient(
    from calc(sin(var(--seed)) * 1turn),
    #667eea, #764ba2,
    calc(cos(var(--seed)) * 1turn), #667eea
  );
  clip-path: polygon(
    calc(cos(var(--seed)) * 100%) 0%,
    100% calc(sin(var(--seed)) * 100%),
    50% 100%, 0% 50%
  );
}

Changing the --seed value generates entirely different patterns, making each page load visually unique.

Browser Support and Real-World Use

Use @supports (sin(0)) for feature detection. For real-world applications, consider dashboard gauges, tooltip positioning that avoids viewport edges via atan2, and mathematical visualizations. Always respect prefers-reduced-motion by disabling non-essential animations.

Conclusion

CSS trigonometric functions unlock a new dimension of stylesheet capability. By thinking geometrically and combining trig functions with custom properties, developers can create complex layouts, animations, and procedural designs that were previously impossible without JavaScript. The future of CSS is mathematical.