CSS @property Rule
Example
Specify two custom properties for a gradient - and use it to animate a gradient:
@property --startColor {
syntax: "<color>";
initial-value: #EADEDB;
inherits: false;
}
@property --endColor
{
syntax: "<color>";
initial-value: #BC70A4;
inherits: false;
}
Try it Yourself »
More "Try it Yourself" examples below.
Definition and Usage
The @property rule is used to define custom
CSS properties directly in the stylesheet without having to run any
JavaScript.
The @property rule has data type checking
and constraining, sets default values, and defines whether the property can
inherit values or not.
The benefits of using @property:
- Type checking and constraining: You must specify the data type of the custom property, such as <number>, <color>, <length>, etc. This prevents errors and ensures that custom properties are used correctly
- Set default values: You set a default value for the custom property. This ensures that if an invalid value is assigned later, the browser uses the defined fallback value
- Set inheritance behavior: You must specify whether the custom property can inherit values from its parent elements or not
Example of defining a custom property:
@property --my-color {
syntax: "<color>";
inherits: true;
initial-value: lightgray;
}
The definition above says that --my-color is a color property, it can inherit values from parent elements, and its default value is lightgray.
To use the custom property in CSS:
body {
backgound-color: var(--my-color);
}
Browser Support
The numbers in the table specifies the first browser version that fully supports the at-rule.
| At-rule | |||||
|---|---|---|---|---|---|
| @property | 85 | 85 | 128 | 16.4 | 71 |
CSS Syntax
@property
--propertyname {
syntax: "<color>";
initial-value: red;
inherits: false;
}
Property Values
| Value | Description |
|---|---|
| --propertyname | Required. The name of the custom property |
| syntax | Can be a
<length>, <number>, <percentage>, <length-percentage>, <color>, <image>, <url>,
<integer>, <angle>, <time>, <resolution>, <transform-function>, or <custom-ident>,
or a list of data type and keyword values.
The + (space-separated) and # (comma-separated) multipliers indicate that a list of values is expected, for example <color># means a comma-separated list of <color> values is the expected syntax. Vertical lines (|) can create "or" conditions for the expected syntax, for example <length> | auto accepts a <length> or auto, and <color># | <integer># expects a comma-separated list of <color> values or a comma-separated list of <integer> values. |
| initial-value | Sets the initial value for the property |
| inherits | True or false. Controls whether the custom property registration specified by @property inherits by default |
More Examples
Example
Specify two custom properties: One for item size and one for item color:
@property --item-size {
syntax: "<percentage>";
inherits: true;
initial-value: 50%;
}
@property --item-color {
syntax:
"<color>";
inherits: false;
initial-value: lightgray;
}
Try it Yourself »
Related Pages
CSS Tutorial: CSS - The @property Rule
