@property
Registers a custom property with a type, so the browser can animate it and check its value.
Syntax
@property --name { syntax: "<type>"; inherits: false; initial-value: …; }Parameters
| Parameter | Type | Description |
|---|---|---|
| syntax | string | The type in quotes and angle brackets: `"<color>"`, `"<length>"`, `"<angle>"`. |
| inherits | boolean | Whether the property is inherited. |
| initial-value | value | The value used when none is set. |
Examples
An animated progress ring — without @property the gradient would jump instead of moving smoothly:
<style>
@property --angle {
syntax: "<angle>";
inherits: false;
initial-value: 0deg;
}
.ring {
width: 100px; height: 100px; border-radius: 50%;
background: conic-gradient(teal var(--angle), lightgray 0);
transition: --angle 1s;
}
.ring:hover { --angle: 270deg; }
</style>
<div class="ring"></div>
<p>Hover over the ring.</p>Notes
Ordinary custom properties are just text to the browser, so they cannot be animated. Registration gives them a type. Supported in all current browsers since 2024.
See also
- var() — Inserts the value of a custom property (a CSS variable).
- transition — Animates the change of a property from the old value to the new one.
- linear-gradient() — A smooth transition between colors along a straight line — used as a background image.
In the tutorial
- CSS functions — Calculations right in CSS — calc(), min(), max() and clamp(), mixing units, fluid sizes and functions together with variables.