CSS var() Function
Example
First, declare a global variable named "--main-bg-color", then use the var() function to insert the value of the variable later in the style sheet:
:root {
--main-bg-color: coral;
}
#div1 {
background-color: var(--main-bg-color);
}
#div2 {
background-color: var(--main-bg-color);
}
Try it Yourself »
More "Try it Yourself" examples below.
Definition and Usage
The CSS var() function is used to insert the value of a CSS variable.
| Version: | CSS3 |
|---|
Browser Support
The numbers in the table specify the first browser version that fully supports the function.
| Function | |||||
|---|---|---|---|---|---|
| var() | 49.0 | 15.0 | 31.0 | 9.1 | 36.0 |
CSS Syntax
var(--name, value)
| Value | Description |
|---|---|
| name | Required. The variable name (must start with two dashes) |
| value | Optional. The fallback value (used if the variable is not found) |
More Examples
Example
Another example that uses the var() function to insert several CSS variable 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 »
Related Pages
CSS tutorial: CSS Variables
