namespace
@property
Registers a typed CSS custom property so the engine knows its syntax, whether it inherits, and its initial value. This unlocks animation and transition of custom properties and rejects invalid values instead of falling back to the string type.
@property --name { syntax: '<type>'; inherits: <bool>; initial-value: <value>; }Common conditions / descriptors
| Descriptor | Purpose |
|---|---|
| syntax | The value grammar, e.g. '<color>', '<length>', '<number>', '<angle>', '*' |
| inherits | true | false — whether descendants inherit the value |
| initial-value | The value used before any author declaration; required unless syntax is '*' |
| '<color>' | Type the property as a color for smooth transitions |
| '<length>' | Type as a length so calc() and animation work correctly |
| '<angle>' | Enables animating gradient/conic angles smoothly |
Examples
@property --accent {
syntax: '<color>';
inherits: true;
initial-value: #6366f1;
}
.button { transition: --accent 200ms; }Register a color token so it can be transitioned
@property --angle {
syntax: '<angle>';
inherits: false;
initial-value: 0deg;
}
@keyframes spin { to { --angle: 360deg; } }Animate a custom angle in a conic-gradient border
@property --gap {
syntax: '<length>';
inherits: true;
initial-value: 16px;
}Type-safe spacing token — invalid values are rejected, not stringified
/* JS equivalent */
CSS.registerProperty({ name: '--accent', syntax: '<color>', inherits: true, initialValue: '#6366f1' });Same registration from JavaScript
Gotcha
Without @property, custom properties are treated as raw strings and cannot be smoothly interpolated. If you omit initial-value (or provide one that doesn't match syntax), the registration is invalid.
Related at-rules
@keyframes
Defines a named animation sequence by describing intermediate style waypoints between from (0%) and to (100%). Elements reference the name via the animation-name property to play the sequence.
@supports
Applies rules only when the browser supports the tested CSS feature, enabling progressive enhancement without JavaScript. Conditions can be combined with and, or, and not.
@layer
Declares one or more cascade layers so authors can control the order in which rule groups cascade, independent of specificity. Layers declared later win over layers declared earlier, and unlayered styles win over all named layers.
@import
Pulls another stylesheet into the current one at parse time, optionally scoped to a cascade layer, supports condition, or media query. It must appear at the top of a stylesheet, before all other rules except @charset and @layer statements.
@charset
Declares the character encoding of the stylesheet so the parser can decode non-ASCII bytes correctly. It must be the very first thing in the file, byte for byte, and only utf-8 is meaningful in practice.