@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.
Syntax
/* Usage 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.
85+
128+
16.4+
85+
Your first month is free
Managed WordPress hosting for faster sites.
Learn more