W3cubDocs

/CSS

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⁩.

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: #123456;
--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: #1166ff;
  --second-color: #ffff77;
}

#firstParagraph {
  background-color: var(--first-color);
  color: var(--second-color);
}

#secondParagraph {
  background-color: var(--second-color);
  color: var(--first-color);
}

#container {
  --first-color: #229900;
}

#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

	Desktop					Mobile
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet	WebView Android	WebView on iOS
`--*`	49	15	31	36	9.1	49	31	36	9.3	5.0	49	9.3