This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

Property names that are prefixed with --, like --example-name, represent custom properties that contain a value that can be reused throughout the document using the (var()) function.

Custom properties participate in the cascade: each of them can appear several times, and the value of the variable will match the value defined in the custom property decided by the cascading algorithm.

Initial valuesee prose
Applies toall elements
Inheritedyes
Mediaall
Computed valueas specified with variables substituted
Animation typediscrete
Canonical orderper grammar

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 tokens. It represents the entirety of what a valid declaration can have as its value.

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.
Working Draft Initial definition

Browser compatibility

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 49.0 15 42.0 (42.0) No support 36.0 9.3[3]
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support 50.0 29.0 (29.0) No support 37.0 9.3[3]

[3] See WebKit bug 19660.

See also

Document Tags and Contributors

 Contributors to this page: equinusocio, SEMSITES, bunnybooboo, yisibl, Siilwyn, lleaff, Sebastianz, teoli
 Last updated by: equinusocio,