CSS Custom Properties & @property

Live theming via the cascade — and typed custom properties that unlock gradient animation.

1 · Live Theming via the Cascade

Sliders set custom properties on .theme-root via inline style. The sample card reads --brand-hue, --radius, --space, and --font-scale — no CSS rules are rewritten, only the cascade updates.

--brand-hue 72

--radius (px) 8

--space (scale) 1

--font-scale 1

Inline style on .theme-root Properties cascade to descendants — children inherit computed values, not the var() reference chain.

Pro plan

Deploy faster

Custom properties let you theme at runtime without rebuilding CSS.

2 · @property — Typed Custom Properties

Register --angle with syntax: '<angle>' so the browser can interpolate it. Without @property, animating a custom property inside conic-gradient() snaps instead of spinning smoothly.

@property --angle {

  syntax: "<angle>";

  inherits: false;

  initial-value: 0deg;

}

Why @property matters: Unregistered custom properties are treated as strings at computed-value time. The animation engine cannot interpolate "0deg" → "360deg" as an angle — it jumps. Typed registration tells the engine the value is an <angle>, enabling smooth keyframe interpolation.

Gradient rotation: smooth (typed --angle)