CSS <angle> Data Type
<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
When you see
<angle> (including the
>) 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 (
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
<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.
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.
Angle Unit Identifiers
Here are the valid unit identifiers for the
<angle> data type:
- Degrees. There are 360 degrees in a full circle.
- Gradians, also known as "gons" or "grades" (although these aren't valid unit identifiers — you should still use
gradas the unit identifier). There are 400 gradians in a full circle.
- Radians. There are 2Ï€ radians in a full circle.
- Turns. There is 1 turn in a full circle.
The unit identifier is optional for zero angles. For example, both
rotate(0) are valid (but
rotate(45) is not).