CSS <angle> Data Type
Description
The CSS <angle>
data type represents an angle value. It is used in any case where you can provide an angle as a value, such as in the rotate()
function to rotate an element or in the linear-gradient()
function to determine the angle of the gradient.
Angle values in CSS can be expressed in degrees (deg
), gradians (grad
), radians (rad
), or turns (turn
). The unit is optional after the number 0, and a single +
or -
sign may be preceded. Positive numbers represent clockwise angles, while negative numbers represent counterclockwise angles.
Here are some examples of valid <angle>
values:
45deg
-90grad
1.57rad
0.5turn
The <angle>
data type is often used in conjunction with other CSS data types, such as <length>
and <percentage>
. For example, you could use the rotate()
function to rotate an element by a certain angle relative to its height:
.my-element {
transform: rotate(45deg);
height: 100px;
}
Or you could use the linear-gradient()
function to create a gradient that starts at the top left corner of an element and extends to the bottom right corner, with an angle of 45 degrees:
.my-element {
background: linear-gradient(45deg, red, blue);
}
The <angle>
data type is a powerful tool that can be used to create a variety of effects in CSS.
Syntax
property: <angle>;
Values
- degRepresents an angle in degrees. There are 360 degrees in a full circle.
- gradRepresents an angle in gradians. There are 400 gradians in a full circle.
- radRepresents an angle in radians. There are 2π radians in a full circle.
- turnRepresents an angle in a number of turns. There is 1 turn in a full circle.
The values of some angles are presented in the table below:
![]() |
90deg = 100grad = 0.25turn ≈ 1.5708rad |
![]() |
180deg = 200grad = 0.5turn ≈ 3.1416rad |
![]() |
270deg = 300grad = 0.75turn ≈ 4.7124rad |
![]() |
-90deg = -100grad = -0.25turn ≈ -1.5708rad |
Example
<p>Example of the angle css data type using gradients.</p>
body {
background: #CE5937;
background: -moz-linear-gradient(-45deg, #CE5937 0%, #1C6EA4 50%, #C59237 100%);
background: -webkit-linear-gradient(-45deg, #CE5937 0%, #1C6EA4 50%, #C59237 100%);
background: linear-gradient(135deg, #CE5937 0%, #1C6EA4 50%, #C59237 100%);
}
p {
background: #fff;
padding: 5px;
}
Browser Support
The following table will show you the current browser support for the CSS angle
data type.
Desktop | |||||
![]() |
![]() |
![]() |
![]() |
![]() |
|
12 | 2 | 3.6 | 15 | 4 |
Tablets / Mobile | |||||
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
18 | 4 | 14 | 3.2 | 1 | 2 |
Last updated by CSSPortal on: 7th October 2023