@property

A gradient angle that actually animates

CaveatCustom properties are strings until you register them. Animate an unregistered --angle and it jumps from start to end with nothing in between — no error, no warning, just a hard cut at 50%.

FallbackRegistering it declares a type, so the browser can interpolate. It also gives the property an initial value, which is what stops the first frame from rendering unstyled.

@property --spin {
  syntax: "<angle>";  /* now it can interpolate */
  inherits: false;
  initial-value: 0deg;
}
.ring {
  background: conic-gradient(from var(--spin), …);
}
@keyframes spin { to { --spin: 360deg; } }

Published 8 Aug 2026