Typed custom properties without JavaScript
Custom properties were strings. You couldn't animate them or get browser validation. @property gives you a type, so the browser can interpolate and validate.
2 syntax: "<angle>";
3 inherits: false;
4 initial-value: 0deg;
5}
6.wheel {
7 background: hsl(var(--hue), 80%, 50%);
8 transition: --hue .3s;
9}
2.wheel {
3 background: hsl(var(--hue), 80%, 50%);
4 transition: --hue .3s; /* ignored, not interpolable */
5}
@property Browser Support
Since 2024 this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
Works in all modern browsers. May need a fallback for older browsers.
Your first month is free
Managed WordPress hosting for faster sites.
Animatable
Transition or animate custom properties. The browser interpolates by type.
Validated
Invalid values fall back to initial-value. No silent string surprises.
No JS
No script to parse or tween. Pure CSS for hue, length, or number transitions.
How it works
Custom properties were untyped. The browser stored them as strings, so you couldn't transition from 0 to 360 for a hue, and invalid values weren't caught. You needed JS to tween or validate.
@property --name { syntax: "<angle>"; inherits: false; initial-value: 0deg; } registers the variable with a type. The browser can interpolate it in transitions and animations and will reject invalid values. Syntax can be <length>, <color>, <number>, and more.