Skip to main content
PUBLIC.INTERNET
⚡ Acceso Inmediato🔒 Privacidad Primero🆓 Siempre Gratis📱 Funciona en Todos Lados

CSS @property Generator

A plain CSS custom property like --angle: 0deg is just a string to the browser, which is why you cannot smoothly animate or transition it. The @property at-rule registers a custom property with a real type, so the browser knows how to interpolate it and gains type checking and a guaranteed fallback. This generator builds that rule for you: enter a Property name, pick a Syntax (the value type, such as <angle>, <color>, <length>, <percentage>, or <number>), set an Initial value, and choose whether it inherits. The CSS panel writes the complete @property block plus a ready-made @keyframes usage example that animates it. The live preview registers the same value type and animates it in front of you, so you can see a conic gradient rotate, a color glow, or a box scale, the exact behavior that is impossible with an unregistered variable.

CSS

Live preview
How to Register a CSS @property
  1. Name the property - Type a custom property name in Property name; it is normalized to start with the required double dash.
  2. Pick the value type - Choose a Syntax from the dropdown; the Initial value fills with a sensible default for that type.
  3. Set the initial value and inheritance - Edit Initial value and tick inherits if descendant elements should receive the value.
  4. Watch it animate - Keep Animate the property in the preview checked to see the registered value transition live, then untick it to pause.
  5. Copy the CSS - Click Copy to grab the @property rule and the animation example, and paste them into your stylesheet.
Why This Tool?
 The pages that rank for @property are reference docs and explainer posts. They describe the syntax, but you cannot try it there, and the single most compelling reason to register a property, that it becomes animatable, is exactly the part that a static code block cannot show. This tool is the interactive counterpart: change the type and watch the registered value actually interpolate, which makes the difference from a normal variable obvious in a second rather than a paragraph. 
 The mechanics worth remembering: the syntax descriptor is what unlocks animation, because once the browser knows a value is an <angle> rather than an arbitrary string it can compute the in-between frames. The initial-value is mandatory for any syntax other than the universal *, and inherits: false is the right default for most visual properties so a parent's value does not leak into children. A practical tip: registering --angle as <angle> is the canonical way to animate a conic-gradient rotation, which plain custom properties simply cannot do.