@property (registered custom properties)

Baseline 2024 (Chrome 85, Safari 16.4, Firefox 128).

Chrome 85Edge 85Safari 16.4Firefox 128

Gives a custom property a type, initial value and inheritance, which makes it animatable. Classic use: animate a gradient angle or a numeric counter, which plain custom properties cannot interpolate.

Animated conic border

CSS

@property --fx-010-angle{syntax:"<angle>";inherits:false;initial-value:0deg}
.fx-010{
  padding:20px;border-radius:12px;font-family:system-ui;color:#fff;background:#111;
  border:3px solid transparent;
  background:linear-gradient(#111,#111) padding-box,conic-gradient(from var(--fx-010-angle),#2563eb,#ec4899,#2563eb) border-box;
  animation:fx-010-spin 3s linear infinite;
}
@keyframes fx-010-spin{to{--fx-010-angle:360deg}}
@media (prefers-reduced-motion: reduce) {
  .fx-010, .fx-010 * { animation: none; transition: none; }
}

HTML

<div class="fx-010">Animated conic border</div>

Fallback: Without @property the property is untyped and the animation snaps between values; the static border still renders.

Source: developer.mozilla.org/en-US/docs/Web/CSS/@property

Prompt

When animating a value that lives in a custom property (gradient angle, hue, number), register it with `@property --name { syntax: "<angle>"; inherits: false; initial-value: 0deg }` so the browser can interpolate it, then animate or transition `--name` directly. Never try to transition an unregistered custom property.