← Back to at-rules

CSS At-rule

@property

Variables

Registers a custom CSS property with a defined type, initial value, and inheritance behavior.

Syntax

@property --name { syntax: '<type>'; inherits: false; initial-value: value; }

Example

@property --angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

Common use cases

  • Animating CSS custom properties
  • Typed custom properties for design tokens
  • Gradient angle animations

Practical developer insight

@property unlocks animating custom properties — without it, CSS variables can't be transitioned. It's what makes animated gradients and typed tokens possible.

Related

@layer@supportstransition