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
--somekeyword: left; --somecolor: #0000ff; --somecomplexvalue: 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 an unallowed 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
.
Formal syntax
<declaration-value>
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: #488cff; --second-color: #ffff8c; } #firstParagraph { background-color: var(--first-color); color: var(--second-color); } #secondParagraph { background-color: var(--second-color); color: var(--first-color); } #container { --first-color: #48ff32; } #thirdParagraph { background-color: var(--first-color); color: var(--second-color); }
Result
Specifications
Specification | Status | Comment |
---|---|---|
CSS Custom Properties for Cascading Variables Module Level 1 The definition of '--*' in that specification. |
Candidate Recommendation | Initial definition. |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
--* | Chrome
Full support
49
| Edge Full support 15 | Firefox
Full support
31
| IE No support No | Opera Full support 36 | Safari Full support 9.1 | WebView Android Full support 49 | Chrome Android
Full support
49
| Firefox Android
Full support
31
| Opera Android Full support 36 | Safari iOS Full support 9.3 | Samsung Internet Android Full support 5.0 |
env() | Chrome Full support 69 | Edge Full support 79 | Firefox Full support 65 | IE No support No | Opera Full support 56 | Safari
Full support
11.1
| WebView Android Full support 69 | Chrome Android Full support 69 | Firefox Android Full support 65 | Opera Android Full support 48 | Safari iOS
Full support
11.3
| Samsung Internet Android Full support 10.0 |
var() | Chrome
Full support
49
| Edge Full support 15 | Firefox
Full support
31
| IE No support No | Opera Full support 36 | Safari Full support 9.1 | WebView Android Full support 50 | Chrome Android
Full support
49
| Firefox Android
Full support
31
| Opera Android Full support 36 | Safari iOS Full support 9.3 | Samsung Internet Android Full support 5.0 |
Legend
- Full support
- Full support
- No support
- No support
- Experimental. Expect behavior to change in the future.
- Experimental. Expect behavior to change in the future.
- See implementation notes.
- See implementation notes.
- User must explicitly enable this feature.
- User must explicitly enable this feature.
- Uses a non-standard name.
- Uses a non-standard name.
See also
- Using CSS variables
- The
var()
function