CSS @property registers custom properties with a syntax type, enabling the browser to interpolate them. Without registration, custom property transitions snap instantly because the browser treats them as opaque strings.
Hover over these cards to see border-radius animate smoothly from var(--radius-s) to var(--radius-2xl). The transition works because --radius-s and related tokens are registered as <length> values.
A unified set of CSS custom properties for spacing, color, and typography that drive the entire system.
Stack, cluster, grid, sidebar, and more — composable layout patterns via data attributes.
Encapsulated interactive elements that enhance semantic HTML without framework dependencies.
These buttons transition from var(--radius-m) to var(--radius-full) on hover and focus — morphing from rounded rectangle to pill shape.
Vanilla Breeze registers --radius-s, --radius-m, and --radius-l with syntax: "<length>". The browser knows these are numeric lengths, so it can interpolate between values during transitions.
@property --radius-s {
syntax: "<length>";
inherits: true;
initial-value: 0.25rem;
}
Unregistered custom properties are treated as strings by the browser. Transitioning from one string to another produces an instant snap — there are no intermediate values to interpolate.
This uses an unregistered --demo-radius property. The radius change may snap instead of animating.