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.