sin/cos/tan real-time preview · Circular layout · Wave animation · CSS Values Level 5
The CSS Trigonometric Generator is a visualization tool for CSS Values Level 5 trig functions. It supports sin(), cos(), tan() with real-time previews of circular layouts, wave animations, and orbital effects, auto-generating usable CSS code.
Circular Menus: Use sin()/cos() for ring navigation without JavaScript position calculations.
Wave Animations: Create smooth wave effects with sin() — more elegant than keyframe animations.
Loading Animations: Elliptical orbits and pulse scaling effects in pure CSS.
CSS trigonometric functions were supported by all major browsers in 2023. They belong to the CSS Values and Units Level 5 specification, working alongside calc(), min(), max(), and clamp(). Angle units support deg, rad, grad, and turn. sin() and cos() return unitless numbers from -1 to 1.
CSS Values Level 5 math functions including sin(), cos(), tan(). Allow direct trig calculations in CSS for circular layouts, wave animations, etc., without JavaScript.
Chrome 111+, Firefox 108+, Safari 15.4+, Edge 111+ all support CSS trig functions.
Angle units: deg, rad, grad, turn. For example, sin(90deg) = 1.
Circular layouts, wave animations, orbital rotation, dynamic sizing. Use cos()/sin() for positions — more elegant than keyframes.
Unitless numbers from -1 to 1. Multiply by a value: translateX(calc(sin(45deg) * 100px)) ≈ 70.7px.