CSS <angle> Data Type

The CSS <angle> data type represents an angle expressed using degrees, gradians, radians, or turns. Angle values are commonly used with CSS transforms, gradients, and other features that require a direction or rotation.

Syntax

An <angle> consists of a number immediately followed by an angle unit. There is no space between the number and unit.

45deg
100grad
1.5708rad
0.25turn

<angle> Units

Unit	Name	Description
`deg`	Degrees	There are `360deg` in one complete rotation.
`grad`	Gradians	There are `400grad` in one complete rotation.
`rad`	Radians	There are 2π radians, approximately `6.2832rad`, in one complete rotation.
`turn`	Turns	There is `1turn` in one complete rotation.

How <angle> Works

Different angle units can represent the same rotation. For example, 90deg, 100grad, approximately 1.5708rad, and 0.25turn all represent one-quarter of a complete rotation.

Positive angle values represent clockwise rotation, while negative values represent counterclockwise rotation. For example, 90deg represents a clockwise quarter turn and -90deg represents a counterclockwise quarter turn.

<angle> Example

The following example uses the rotate() function to rotate four boxes using equivalent angle values:

.degrees { transform: rotate(45deg); }
.gradians { transform: rotate(50grad); }
.radians { transform: rotate(0.7854rad); }
.turns { transform: rotate(0.125turn); }

Browser Result

45deg

50grad

0.7854rad

0.125turn

The <angle> data type can be used with CSS properties that accept rotations, directions, or other angle-based values, including:

Specifications

The <angle> data type is defined in the CSS Values and Units Module Level 4 .

CSS <angle> Data Type