@property

Published on Jul 10, 2025

The @property at-rule allows us to register custom CSS properties with specific syntax. This opens up being able to animate the values of custom properties, which can make previously unanimateable things, well, animated!

Without @property, custom properties are treated as strings because value, or values, you’d use are valid. By registering them, we tell CSS what the value is, such as a number, which is animateable.

When registering a custom property, we have to provide the syntax and an initial value, and you can optionally define whether it’s inherited or not (they inherit by default).

@property --example {
  syntax: "<number>";
  inherits: false;
  initial-value: #123321;
}

Animating gradient colors

Here’s an example where we register a color property and animate it on hover:

Animating gradient angles

And here’s how you can animate the angle of a gradient:

Common syntax types

<color> - For colors
<angle> - For angles (deg, rad, turn)
<length> - For lengths (px, rem, em, etc.)
<percentage> - For percentage values
<number> - For numbers

You can find a full list here.

Browser support

@property is supported in all modern browsers.