grad
Gradians: a full turn is 400grad, so a right angle is 100grad.
Safe to useBaseline: widely available
| Browser | Since |
|---|---|
| Chrome | 2+ |
| Chrome Android | 18+ |
| Edge | 12+ |
| Firefox | 3.6+ |
| Firefox Android | 4+ |
| Safari | 4+ |
| Safari iOS | 3.2+ |
Formula 400grad = 360deg = 1turn
How it works
A gradian is 1/400 of a circle, which makes a right angle exactly 100grad. One gradian is 0.9deg, so rotate(100grad) and rotate(90deg) produce the same transform. Outside CSS the unit lives on in surveying, where it also goes by the name gon.
In CSS you meet it only when a value arrives already in gradians, from a survey plan or a GIS export. There is no reason to choose it for a design, and a stylesheet in grad is harder for the next reader than one in deg or turn.
The name is also an awkward thing to search for. grad sits inside gradient, so a search of the stylesheet for it returns every gradient, and the angle itself is easy to miss.
Try it
Convert angles, time and resolution
Pick a unit and a value. The other units of the same kind are shown, and an angle turns the square.
deg- 90
grad- 100
rad- 1.5708
turn- 0.25
Your screen:
The same as a table
| Kind | Equal to |
|---|---|
| A right angle | 0.25turn, 90deg, 100grad, 1.5708rad |
| A duration | 1s, 1000ms |
| A resolution | 1dppx, 1x, 96dpi, 37.795dpcm |
Reach for it when
Angles that arrive in gradians from a survey plan or a GIS export.
Watch out
100grad is a right angle and 90deg is the same angle. Mixing the two in one stylesheet makes values hard to compare at a glance.
.pointer {
rotate: 100grad;
}