Originally published on danholloran.me
There's a quiet frustration that hits every developer who first tries to animate a CSS custom property. You write a clean gradient, put the color stop in a variable, add a transition — and it snaps. No animation. Just an instant cut from one value to the next.
The reason is straightforward: the browser doesn't know what --brand-color is. It's just a string as far as CSS is concerned. You can't interpolate a string. @property fixes this by letting you register a custom property with a type, an initial value, and an inheritance rule — turning an opaque blob of text into something the browser can actually reason about and animate.
As of 2026, @property is Baseline Widely Available. Chrome, Firefox, Safari, and Edge all support it. There's no reason not to use it for any non-trivial design system.
The Syntax
