CSS <angle-percentage> Data Type

The <angle-percentage> CSS data type represents a value that can be specified either as an angle or as a percentage. This dual-purpose type is particularly useful in properties where both rotational measurements and relative proportions are meaningful, such as in gradients, rotations, or certain animation settings. By allowing either angles or percentages, <angle-percentage> provides flexibility, enabling designers to choose the unit that best expresses their intended effect.

1. Angles

Angles are absolute measurements. You can use standard CSS units:

• deg (degrees) – a full circle is 360deg
• rad (radians) – 2π rad = 360deg
• grad (gradians) – 400grad = 360deg
• turn – 1turn = 360deg

Example: Using angles in a conic gradient

div.angle-example {
  width: 200px;
  height: 200px;
  background: conic-gradient(
    red 0deg,   /* start at 0 degrees */
    blue 90deg, /* transition to blue at 90 degrees */
    green 180deg,
    yellow 270deg
  );
}

In this example, the gradient colors are placed at precise absolute rotations around the center of the element.

2. Percentages

Percentages are interpreted as fractions of a full 360° rotation:

• 0% = 0°
• 25% = 90°
• 50% = 180°
• 75% = 270°
• 100% = 360°

Percentages are often easier to reason about in animations or gradients because they represent proportional progress rather than a fixed angle.

Example: Using percentages in a conic gradient

div.percentage-example {
  width: 200px;
  height: 200px;
  background: conic-gradient(
    red 0%,    /* start at 0% of full circle */
    blue 25%,  /* 25% of 360° = 90deg */
    green 50%, /* 50% of 360° = 180deg */
    yellow 75%
  );
}

Here, the effect is visually identical to the angle-based example, but the numbers represent proportional coverage rather than exact degrees.

3. Angles vs Percentages in Transformations

<angle-percentage> is also practical for rotations using <code>transform: rotate()</code>:

.box-angle {
  transform: rotate(90deg); /* absolute 90 degrees */
}

.box-percentage {
  transform: rotate(25%); /* 25% of full rotation = 90deg */
}

This makes percentages especially useful in animations or progress indicators, where you might want the rotation to scale dynamically based on some variable input, such as scroll progress.

4. Mixing Angles and Percentages

Some properties allow mixing angles and percentages in the same value list. For example, conic gradients or keyframe animations:

div.mix-example {
  background: conic-gradient(
    red 0deg,
    blue 25%,  /* mix of percentage and angle */
    green 180deg,
    yellow 75%
  );
}

Browsers will automatically convert percentages to angles internally so that the visual result aligns correctly.

5. When to use which

• Use angles when you need precise, fixed rotations regardless of container size.
• Use percentages when you want proportional rotations, such as progress-based animations or circular charts.

Example: Animated circular progress bar using percentages

@keyframes spin {
  0% { transform: rotate(0%); }   /* 0% of full circle */
  50% { transform: rotate(50%); } /* half rotation = 180deg */
  100% { transform: rotate(100%); }/* full rotation = 360deg */
}

.circle {
  animation: spin 4s linear infinite;
}

This shows how percentages make dynamic rotation much simpler to manage compared to converting degrees manually.

<angle-percentage> = <angle> | <percentage>  

• <angle>Refer to <angle> for possible values
• <percentage>Refer to <percentage> for possible values

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

This data type is supported by all modern browsers.

Desktop

Tablets & Mobile