CSS <angle> Data Type

Description

The <angle> CSS data type sets the angle of inclination or rotation. A positive value is measured clockwise, a negative value counter clockwise. The <angle> consists of a <number> followed by either deg, rad, grad or turn. The number is immediately followed by the unit, no white space is allowed between them, and the length units are case-insensitive, i.e. 90deg and 90DEG are treated the same.

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 &lt;angle&gt; 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

Desktop
9	12	2	3.6	15	4
Tablets / Mobile
2	18	4	14	3.2	1.0

Last updated by CSSPortal on: 6th December 2019