← All Tools

CSS @property Generator

Register a CSS custom property with a type so it animates, validates, and inherits the way you want. Without @property, custom properties are always typed as <custom-ident> — meaning a transition between two color values is an instant jump rather than a gradient. Pick a syntax, choose an initial value, and watch the box animate.

Configure

Must start with two dashes (--).
Animatable types: <color>, <length>, <number>, <angle>, <time>, <percentage>.
Required unless syntax is *. Used when the value is invalid or unset.
Click the box in the preview to animate from initial → target.
When true, descendants pick up the value. Set to false for one-element-only properties like a per-card accent.

Generated CSS


  





  
Live preview

  
Click the box to toggle between the initial and target value. The animation only works because the property is registered with a typed syntax.

  

    

  

  

    
    Untick to compare with an unregistered property — the box snaps instead of animating.
  






  
Syntax reference

  

    
SyntaxAnimatableExample value

    
      
<color>yes#f0f, oklch(70% 0.2 50)

      
<length>yes16px, 2rem, 50vw

      
<length-percentage>yes50%, 20px

      
<percentage>yes75%

      
<number>yes1.5, 0

      
<integer>yes3

      
<angle>yes45deg, 0.5turn

      
<time>yes200ms, 1s

      
<resolution>no96dpi

      
<image>nourl(bg.png)

      
<url>nourl(/foo)

      
<custom-ident>noany identifier

      
*noany value (acts unregistered)

    
  






  
Why register a custom property?

  

    By default, every CSS variable is parsed as an opaque token. The browser doesn't know --brand: #f00 is a color, so when you write transition: --brand 1s nothing animates — the value flips at the halfway mark like a discrete step. Registering with @property tells the browser the type, lets it interpolate intermediate values, and rejects malformed input by falling back to the initial-value. This unlocks gradient animations (when the gradient stops are custom properties), conic-gradient rotations, scroll-driven property changes, and view-transition-style fades that don't require JavaScript.