Custom propertiesBaseline · Widely available

Custom properties are CSS properties prefixed with -- that set values you can reuse with the var() function. For example, you can set a --key-color property to reuse as border-color: var(--key-color). Also known as CSS variables.

Supported in all major browsers for at least 30 months — safe to use without fallbacks. Baseline since Apr 5, 2017. Widely available since Oct 5, 2019.

How to use ↓Compare browsers

Browser support

DesktopChrome

1–48Not supported

49+Supportedsince Mar 2, 2016

Current: 155

Edge

12–14Not supported

15+Supportedsince Apr 5, 2017

Current: 154

Firefox

1–30Not supported

31+Supportedsince Jul 22, 2014

Current: 157

Safari

1–9Not supported

9.1+Supportedsince Mar 21, 2016

Current: 27

MobileChrome Android

18–48Not supported

49+Supportedsince Mar 9, 2016

Current: 155

Firefox Android

4–30Not supported

31+Supportedsince Jul 22, 2014

Current: 157

Safari iOS

1–9Not supported

9.3+Supportedsince Mar 21, 2016

Current: 27

How to use

This feature is Baseline widely available — use it freely, no fallback needed.

Example

CSS

:root {
  --brand: #2563eb;
  --space: 8px;
}

.button {
  background: var(--brand);
  padding: calc(var(--space) * 1.5) calc(var(--space) * 3);
}

.button.danger { --brand: #dc2626; }

Feature detection

CSS · check before using

@supports (custom-property: initial) {
  /* styles that rely on custom-property */
}

/* or in JavaScript */
if (CSS.supports("custom-property", "initial")) {
  // use it
}

Documentation (MDN)

Specification

drafts.csswg.org/css-variables-1 ↗

Usage share

caniuse.com/css-variables ↗

Sub-features

Support for each part of the feature (2). The overall table above shows when the whole feature works.

Sub-feature	Chrome	Edge	Firefox	Safari	Chrome Android	Firefox Android	Safari iOS
custom-property	49	15	31	9.1	49	31	9.3
<var>	49	15	31	9.1	49	31	9.3