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 value see prose
Applies to all elements
Inherited yes
Media all
Computed value as specified with variables substituted
Animation type discrete
Canonical order per grammar


--somekeyword: left;
--somecolor: #0000ff;
--somecomplexvalue: 3px 6px rgb(20, 32, 54);
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.

Formal syntax




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


: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);



Browser compatibility

Feature Chrome Edge Firefox Internet Explorer Opera Safari
Basic support 49 15 29 No 36 Yes





29 — 552 3

No 36 Yes
Feature Android webview Chrome for Android Edge mobile Firefox for Android IE mobile Opera Android iOS Safari
Basic support 49 49 15 29 No 36 Yes
var() 50 ? 15


29 — 552 3

No 37 Yes

1. From version 48: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.

2. From Firefox 29 until Firefox 31, this feature was implemented by the var-variablename syntax.

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

See also

© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.