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