Custom properties (--*): CSS variables
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2017.
* Some parts of this feature may have varying levels of support.
Property names that are prefixed with --
, like --example-name
, represent custom properties that contain a value that can be used in other declarations using the var()
function.
Custom properties are scoped to the element(s) they are declared on, and participate in the cascade: the value of such a custom property is that from the declaration decided by the cascading algorithm.
Initial value | see prose |
---|---|
Applies to | all elements |
Inherited | yes |
Computed value | as specified with variables substituted |
Animation type | discrete |
Syntax
--some-keyword: left;
--some-color: #0000ff;
--some-complex-value: 3px 6px rgb(20 32 54);
<declaration-value>
-
This value matches any sequence of one or more tokens, so long as the sequence does not contain any disallowed token. It represents the entirety of what a valid declaration can have as its value.
Note:
Custom property names are case sensitive — --my-color
will be treated as a separate custom property to --My-color
.
Example
HTML
<p id="firstParagraph">
This paragraph should have a blue background and yellow text.
</p>
<p id="secondParagraph">
This paragraph should have a yellow background and blue text.
</p>
<div id="container">
<p id="thirdParagraph">
This paragraph should have a green background and yellow text.
</p>
</div>
CSS
:root {
--first-color: #16f;
--second-color: #ff7;
}
#firstParagraph {
background-color: var(--first-color);
color: var(--second-color);
}
#secondParagraph {
background-color: var(--second-color);
color: var(--first-color);
}
#container {
--first-color: #290;
}
#thirdParagraph {
background-color: var(--first-color);
color: var(--second-color);
}
Result
Specifications
Specification |
---|
CSS Custom Properties for Cascading Variables Module Level 1 # defining-variables |
Browser compatibility
Report problems with this compatibility data on GitHubLegend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- Partial support
- Partial support
- No support
- No support
- Uses a non-standard name.
- Has more compatibility info.
See also
- The
var()
function @property
at-rule- Using CSS custom properties (variables) guide
- CSS custom properties for cascading variables module