Free CSS Trig Functions Generator
Create dynamic animations with sin(), cos(), tan() using our free tool. CSS math functions.
- sin/cos/tan functions
- Circular positioning
- Wave patterns
- Animation integration
- Browser support info
Frequently Asked Questions
What can I do with CSS trig functions?
Position elements in circles, create wave animations, generate organic curves, and build mathematical layouts—all without JavaScript.
How do I position items in a circle?
Use sin() and cos() with custom properties: --x: calc(cos(var(--angle)) * var(--radius)); --y: calc(sin(var(--angle)) * var(--radius));. Vary --angle for each item.
Are trig functions well supported?
Yes, sin(), cos(), tan(), asin(), acos(), atan(), atan2() are supported in Chrome 111+, Firefox 108+, and Safari 15.4+.