Convert between CSS's four angle units — deg, rad, grad, and turn — and see the same angle applied to a live rotate() and conic-gradient(). Drag the compass needle or type any value; the other three units update instantly.
Click any row to jump the dial to that angle.
| Meaning | deg | rad | grad | turn |
|---|
CSS accepts angles in four interchangeable units. deg is the workhorse — a full turn is 360. rad uses the math convention where a full turn is 2π ≈ 6.2832, useful when a value flows straight out of Math.sin() / Math.cos(). grad divides a turn into 400 units so a right angle is exactly 100 — a survivor from surveying and drafting. turn is the most human: 0.5turn is a half-turn, 0.25turn a quarter-turn, no memorised constants needed.
The CSS convention starts from 12 o'clock and rotates clockwise — that's how rotate(), conic-gradient(from …), and linear-gradient(angle, …) all read their angles. The math convention starts from 3 o'clock and rotates counter-clockwise, which is what Math.atan2() returns. Toggle the two modes above if you're translating between a physics simulation and a CSS transform.
Angle values wrap: rotate(-90deg) and rotate(270deg) render identically at rest, though they animate in opposite directions. Both CSS Values 3 and CSS Transforms 2 allow any of the four units wherever one is accepted, and both accept negative values — no need to normalise into [0°, 360°) unless the animation shortest-path matters.