CSS <angle> Data Type

CSS <angle> Data Type

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The <angle> CSS data type represents a rotational measurement in a two-dimensional plane. Angles are used in a variety of CSS properties to define rotations, directions, or orientations. They are particularly common in properties such as transform for rotating elements, gradients like linear-gradient() for specifying color directions, and rotate() functions within transforms. An can be expressed in several units, including degrees (deg), radians (rad), gradians (grad), and turns (turn).

Angles in CSS follow a clockwise rotation by default, starting from the positive x-axis (the right side). Negative values rotate counterclockwise. This behavior is crucial when animating elements or positioning gradients, as the visual effect depends on both the magnitude and direction of the angle. Additionally, angles can be combined with other CSS data types in functional notations, for example, combining with lengths in translate() or using them with clip-path shapes.

Here are some practical examples of usage:

/* Rotating an element 45 degrees */
.box {
  transform: rotate(45deg);
}

/* Creating a diagonal gradient at 135 degrees */
.gradient {
  background: linear-gradient(135deg, red, blue);
}

/* Using radians for a precise rotation */
.circle {
  transform: rotate(3.1416rad); /* ~180 degrees */
}

/* Using turns for a full rotation */
.spinner {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0turn); }
  to { transform: rotate(1turn); }
}

The <angle> type allows designers and developers to control visual direction and rotation in a precise and flexible way. Its support across many properties makes it a foundational data type for animations, gradients, and geometric transformations in CSS.

Here’s a visual comparison of the <angle> units in CSS, showing how each represents the same rotation:

Unit	Equivalent	Notes
deg	90deg	Degrees; full circle = 360deg
rad	1.5708rad	Radians; full circle = 2π rad
grad	100grad	Gradians; full circle = 400grad
turn	0.25turn	Turns; full circle = 1 turn

Example with all units

.box-deg {
  transform: rotate(90deg);
}

.box-rad {
  transform: rotate(1.5708rad); /* same as 90deg */
}

.box-grad {
  transform: rotate(100grad); /* same as 90deg */
}

.box-turn {
  transform: rotate(0.25turn); /* same as 90deg */
}

This shows that no matter which unit you choose, they all represent the same angle if converted correctly. Using deg is most common, but turn is very handy for animations because fractions of a turn are easy to reason about.

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

HTML

<main class="wrapper">

  <h1 class="title">CSS angle examples</h1>



  <div class="examples">

    <div class="example">

      <div class="label">rotate(45deg)</div>

      <div class="box box-deg">45deg</div>

    </div>



    <div class="example">

      <div class="label">rotate(0.785398rad)</div>

      <div class="box box-rad">0.785398rad</div>

    </div>



    <div class="example">

      <div class="label">rotate(0.125turn)</div>

      <div class="box box-turn">0.125turn</div>

    </div>



    <div class="example">

      <div class="label">rotate(50grad)</div>

      <div class="box box-grad">50grad</div>

    </div>

  </div>

</main>

CSS

/* Demonstrates CSS  values: deg, rad, turn, grad */
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f7fb;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}

.wrapper {
  width: min(1000px, 92%);
  padding: 32px;
}

.title {
  margin: 0 0 18px 0;
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  color: #102a43;
}

.examples {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 20px;
}

.example {
  background: #fff;
  border-radius: 12px;
  padding: 16px;
  text-align: center;
  box-shadow: 0 6px 18px rgba(16, 42, 67, 0.08);
}

.label {
  font-size: 13px;
  color: #506176;
  margin-bottom: 12px;
}

.box {
  width: 100px;
  height: 100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  border-radius: 10px;
  transition: transform 400ms ease;
  transform-origin: center;
}

/* rotate using degrees */
.box-deg {
  transform: rotate(45deg);
  background: linear-gradient(135deg, #ff7eb3, #ff758c);
}

/* rotate using radians (approx. 45deg = 0.785398rad) */
.box-rad {
  transform: rotate(0.785398rad);
  background: linear-gradient(0.785398rad, #84fab0, #8fd3f4);
}

/* rotate using turns (0.125turn = 45deg) */
.box-turn {
  transform: rotate(0.125turn);
  background: linear-gradient(0.125turn, #a18cd1, #fbc2eb);
}

/* rotate using grads (50grad = 45deg) */
.box-grad {
  transform: rotate(50grad);
  background: linear-gradient(50grad, #f6d365, #fda085);
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS angle data type. Hover over a browser icon to see the version that first introduced support for this CSS data type.