Web/CSS/--

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 1The definition of '--*' in that specification.	Candidate Recommendation	Initial definition.

Browser compatibility

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
--*	Chrome Full support 49 Full support 49 Full support 48 Disabled' Disabled' From version 48: this feature is behind the `Enable experimental Web Platform features` preference. To change preferences in Chrome, visit chrome://flags.	Edge Full support 15	Firefox Full support 31 Full support 31 No support 29 — 55 Notes' Disabled' Notes' From Firefox 29 until Firefox 31, this feature was implemented by the `var-variablename` syntax. Disabled' From version 29 until version 55 (exclusive): this feature is behind the `layout.css.variables.enabled` preference (needs to be set to `true`). To change preferences in Firefox, visit about:config.	IE No support No	Opera Full support 36	Safari Full support 9.1	WebView Android Full support 49	Chrome Android Full support 49 Full support 49 Full support 48 Disabled' Disabled' From version 48: this feature is behind the `Enable experimental Web Platform features` preference. To change preferences in Chrome, visit chrome://flags.	Firefox Android Full support 31 Full support 31 No support 29 — 55 Notes' Disabled' Notes' From Firefox 29 until Firefox 31, this feature was implemented by the `var-variablename` syntax. Disabled' From version 29 until version 55 (exclusive): this feature is behind the `layout.css.variables.enabled` preference (needs to be set to `true`). To change preferences in Firefox, visit about:config.	Opera Android Full support 36	Safari iOS Full support 9.3	Samsung Internet Android Full support 5.0
`env()` Experimental'	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 Full support 11.1 No support 11 — 11.1 Alternate Name' Alternate Name' Uses the non-standard name: `constant`	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 Full support 11.3 No support 11 — 11.3 Alternate Name' Alternate Name' Uses the non-standard name: `constant`	Samsung Internet Android Full support 10.0
`var()`	Chrome Full support 49 Full support 49 Full support 48 Disabled' Disabled' From version 48: this feature is behind the `Enable experimental Web Platform features` preference. To change preferences in Chrome, visit chrome://flags.	Edge Full support 15	Firefox Full support 31 Full support 31 No support 29 — 55 Disabled' Disabled' From version 29 until version 55 (exclusive): this feature is behind the `layout.css.variables.enabled` preference (needs to be set to `true`). To change preferences in Firefox, visit about:config.	IE No support No	Opera Full support 36	Safari Full support 9.1	WebView Android Full support 50	Chrome Android Full support 49 Full support 49 Full support 48 Disabled' Disabled' From version 48: this feature is behind the `Enable experimental Web Platform features` preference. To change preferences in Chrome, visit chrome://flags.	Firefox Android Full support 31 Full support 31 No support 29 — 55 Disabled' Disabled' From version 29 until version 55 (exclusive): this feature is behind the `layout.css.variables.enabled` preference (needs to be set to `true`). To change preferences in Firefox, visit about:config.	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.