@property
The @property at-rule allows you to register custom CSS variables with a specific data type and initial value. This is powerful because it allows you to animate things that were previously impossible, like gradients.
Quick example
@property --brand-color {
syntax: '<color>';
inherits: false;
initial-value: #3498db;
}
.box {
background: var(--brand-color);
transition: --brand-color 0.3s ease;
}@property Browser Support
Newly available Since 2024 94% global usage
Since 2024 this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
Works in all modern browsers. May need a fallback for older browsers.
85+
128+
16.4+
85+