CSS var() function
Example
Define an attribute named "--main-bg-color", then use the var() function to call that attribute:
:root {
--main-bg-color: coral;
}
#div1 {
background-color: var(--main-bg-color);
}
#div2 {
background-color: var(--main-bg-color);
}
Try it Yourself »
Definition and usage
The var() function is used to insert custom property values. This method is useful if a property value is used in multiple places.
Supported version: CSS3
Browser Support
The numbers in the table indicate the first browser version number that supports this function.
| Function | |||||
|---|---|---|---|---|---|
| var() | 49.0 | 15.0 | 31.0 | 9.1 | 36.0 |
CSS Syntax
var(custom-property-name, value)
| Value | Description |
|---|---|
| custom-property-name | Required. The name of the custom property, which must start with --. |
| value | Optional. A fallback value, used when the property does not exist. |
More Examples
Example
Use the var() function to call multiple custom values:
:root {
--main-bg-color: coral;
--main-txt-color: blue;
--main-padding: 15px;
}
#div1 {
background-color: var(--main-bg-color);
color: var(--main-txt-color);
padding: var(--main-padding);
}
#div2 {
background-color: var(--main-bg-color);
color: var(--main-txt-color);
padding: var(--main-padding);
}
Try it Yourself »
other extensions