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 used in other declarations using the var() function.

Custom properties participate in the cascade: the value of such a custom property is that from the declaration 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 token. 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.
Candidate Recommendation Initial definition

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic support
Experimental
Chrome Full support 49Edge Full support 15Firefox Full support 29IE No support NoOpera Full support 36Safari Full support YesWebView Android Full support 49Chrome Android Full support 49Edge Mobile Full support 15Firefox Android Full support 29Opera Android Full support 36Safari iOS Full support YesSamsung Internet Android Full support 5.0
var()
Experimental
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 15Firefox 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 NoOpera Full support 36Safari Full support YesWebView Android Full support 50Chrome Android ? Edge Mobile Full support 15Firefox 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 37Safari iOS Full support YesSamsung Internet Android ?
env()
Experimental
Chrome No support NoEdge ? Firefox ? IE ? Opera ? Safari Full support 11.1
Full support 11.1
No support 11 — 11
Alternate Name
Alternate Name Uses the non-standard name: constant
WebView Android ? Chrome Android Full support 69Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS Full support 11.1
Full support 11.1
No support 11 — 11
Alternate Name
Alternate Name Uses the non-standard name: constant
Samsung Internet Android ?

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
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.

See also

Document Tags and Contributors

Last updated by: torazaburo,