Question 1

What is a typed CSS custom property?

Accepted Answer

A typed custom property is declared with the @property at-rule (or CSS.registerProperty in JS) and given an explicit syntax like , , or . Once typed, the browser can interpolate it smoothly between keyframes. Untyped custom properties (declared with plain --foo: 10px) are strings and only animate as discrete jumps.

Question 2

What is the @property at-rule?

Accepted Answer

@property --name { syntax: '<color>'; inherits: true; initial-value: red; } registers a custom property at parse time, with a known syntax and optional default. It's part of CSS Houdini and supported in Chrome 85+, Edge 85+, Safari 16.4+ and Firefox 128+.

Question 3

Why do typed properties animate smoothly but untyped properties jump?

Accepted Answer

Untyped --var is a string, so animations replace the whole value at 50% with no in-between frames. Typed --var has a known numeric/color syntax so the browser can compute intermediate frames and interpolate.

Question 4

Does the @property playground send my CSS to a server?

Accepted Answer

No. All parsing, animation and copy run entirely in your browser via CSS.registerProperty and the built-in typed-OM engine. No uploads, no tracking, no signup.

Generated CSS @property