CSS <angle> Data Type
The CSS <angle>
data type represents an angle value.
The CSS specifications use <angle>
in any case where you can provide an angle as a value.
For example, here's the official syntax for the rotate()
function:
When you see <angle>
(including the <
and >
) anywhere in the CSS specifications, this refers to the fact that the value can be any valid angle data type.
What is a Valid Angle?
A valid angle is a <number>
followed by an angle unit identifier (deg
, grad
, rad
, or turn
).
Here are some examples of valid angles:
Positive angles represent clockwise angles, negative angles represent counterclockwise angles.
So you could turn all the previous examples into a negative angle, in which case they'll go counterclockwise:
Angles with Functions
The <angle>
data type is often used in functions to provide an angle for a particular operation.
For example, the rotate()
function requires an angle as its argument so that it can rotate an element by the given angle.
Like this:
The skew()
function also requires an <angle>
or two:
And angles can also be used with the linear-gradient()
function to determine the angle of the gradient.
Like this:
Angle Unit Identifiers
Here are the valid unit identifiers for the <angle>
data type:
deg
- Degrees. There are 360 degrees in a full circle.
grad
- Gradians, also known as "gons" or "grades" (although these aren't valid unit identifiers — you should still use
grad
as the unit identifier). There are 400 gradians in a full circle. rad
- Radians. There are 2Ï€ radians in a full circle.
deg
- Turns. There is 1 turn in a full circle.
Zero Angles
The unit identifier is optional for zero angles. For example, both rotate(0deg)
and rotate(0)
are valid (but rotate(45)
is not).