Try to transition a gradient by animating the custom property that controls it, and you get a hard cut. The browser is not being stubborn—it is being literal: custom properties are untyped strings, and there is no halfway point between the strings “20%” and “80%”. Nothing to interpolate.

@property gives the variable a type—and typed values tween like any other CSS value.

Registering a type

@property --glow-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
.card {
  background: conic-gradient(from var(--glow-angle), #A38BFF, #FF9E5E, #A38BFF);
  transition: --glow-angle .6s ease;
}
.card:hover { --glow-angle: 180deg; }

Hover the card and the gradient rotates—smoothly, on an animatable timeline, something impossible for fifteen years without canvas. The same trick animates numeric counters via <integer>, color mixes via <color>, and percentage stops in any gradient.

“An untyped variable is a note passed in class. A typed one is a contract the browser can enforce.”

The quieter benefits

Types bring validation: assign nonsense to a registered property and the browser falls back to initial-value instead of silently breaking the cascade downstream. Design tokens gain guarantees—--radius physically cannot hold a color. And because typed properties animate on the compositor-friendly path, variable-driven effects stop being the performance smell they used to be. Small at-rule, structural upgrade.