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:

CSS Data Type Angle 90deg = 100grad = 0.25turn ≈ 1.5708rad
CSS Data Type Angle 180deg = 200grad = 0.5turn ≈ 3.1416rad
CSS Data Type Angle 270deg = 300grad = 0.75turn ≈ 4.7124rad
CSS Data Type Angle -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
Explorer Edge Chrome Firefox Opera Safari
91223.6154
Tablets / Mobile
Android Chrome Firefox Opera Safari Samsung
2184143.21.0

Last updated by CSSPortal on: 6th December 2019