CSS @property Generator

Generate a CSS @property at-rule to register a typed custom property. Once registered, the browser knows the syntax and initial value of your CSS variable, enabling smooth transitions, type validation, and inheritance control. Enter the property name, syntax, inheritance behavior, and initial value to get the complete declaration.

How to use the CSS @property Generator

1. Enter the custom property name — it must start with --, e.g. --brand-hue. 2. Choose the syntax type that matches the values you intend to assign. Common choices are <color> for colors, <number> or <angle> for animated values, and * to accept anything (disables animation). 3. Set inherits to true if child elements should automatically receive the property, or false to scope it locally. 4. Provide an initial value that is valid for the chosen syntax — this is what the browser uses before you assign any value, and it must be parseable. Click Generate to get the @property block, then copy and paste it at the top of your CSS (or into a :root block).

What is CSS @property and why does it matter for animation?

CSS custom properties (variables) defined with var(--x) are, by default, untyped strings. The browser has no idea whether --brand-hue holds a color or an angle, so it cannot interpolate between two values during a CSS transition or animation. The result: transition: --brand-hue 0.3s does nothing — the browser jumps from start to end instantly.

@property (CSS Properties and Values API Level 1, Baseline 2023) lets you register a custom property with a syntax token, an inherits flag, and an initial-value. Once registered, the browser can animate the property smoothly. For example, registering --brand-hue as <angle> with initial-value: 0deg allows you to @keyframes from 0deg to 360deg to rotate a color around the hue wheel. Registering --progress as <number> enables number-typed animations used by scroll-driven animation setups.

The inherits flag controls whether the value cascades down the DOM like a normal CSS property. Setting it to false means each element has its own independent initial value — useful for per-component counters or animation offsets. Setting it to true makes it behave like color or font-size, flowing down from a parent to all descendants.

Common use cases

  • Animating gradient stops — register --hue as <angle> and animate it with @keyframes to create a continuously rotating gradient background without JavaScript.
  • Typed design tokens — register your spacing scale, type scale, and color tokens so the browser enforces the type and falls back cleanly to initial-value when a typo occurs.
  • Scroll-driven counters — CSS scroll-driven animations need a <number>-typed custom property to drive a numeric counter via animation-timeline: scroll().
  • Per-component state — set inherits: false so each card or button maintains its own independent animation phase or state variable.
  • Type safety in large codebases — registered properties refuse invalid assignments and fall back to initial-value, making CSS bugs easier to spot in DevTools.

Frequently asked questions

Can I also register a @property with JavaScript?
Yes — CSS.registerProperty({ name: "--x", syntax: "", inherits: false, initialValue: "red" }) achieves the same result. The CSS @property at-rule is the declarative equivalent and is easier to audit at a glance.

What happens if I set an invalid initial-value?
The browser ignores the entire @property rule. The initial value must be valid according to the syntax — for you need a valid CSS color, for a bare number without units.

Why does @property use * (any) if it blocks animation?
The * syntax accepts any valid CSS value list, which is useful for typed-but-not-animated properties (e.g. storing a long shorthand). Because the value is not a resolved computed type, the browser cannot interpolate between two arbitrary strings.

Is @property supported in all browsers?
As of 2024, Chrome, Edge, Safari (16.4+), and Firefox (128+) all support @property. It is Baseline 2024 (newly interoperable). Check caniuse.com for the latest coverage before using in production without a fallback.

Does inherits: true mean the property is inherited by default?
Yes — like color or font-family. If a parent element sets --my-color and inherits is true, all descendants automatically receive that value unless they override it. With inherits: false, each element starts at initial-value independently.