Custom properties (--*): CSS variables

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: #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

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
--*
49
15
31
No
36
9.1
49
49
31
36
9.3
5.0
env
69
79
65
No
56
11.1
11-11.1
69
69
65
48
11.3
11-11.3
10.0
var
49
15
31
No
36
9.1
50
49
31
36
9.3
5.0

See also

© 2005–2021 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/--*