CSS var() Function

Example

First, declare a global variable named "--main-bg-color", then use the var() function to insert the value of the variable later in the style sheet:

:root {
--main-bg-color: coral;
}

#div1 {
background-color: var(--main-bg-color);
}

#div2 {
background-color: var(--main-bg-color);
}

Try it Yourself »

More "Try it Yourself" examples below.

Definition and Usage

The var() function is used to insert the value of a CSS variable.

Version:	CSS3

Browser Support

The numbers in the table specify the first browser version that fully supports the function.

Function
var()	49.0	15.0	31.0	9.1	36.0

CSS Syntax

var(--name, value)

Value	Description
name	Required. The variable name (must start with two dashes)
value	Optional. The fallback value (used if the variable is not found)

More Examples

Example

Another example that uses the var() function to insert several CSS variable values:

:root {
--main-bg-color: coral;
  --main-txt-color: blue;
  --main-padding: 15px;
}

#div1 {
  background-color: var(--main-bg-color);
  color: var(--main-txt-color);
  padding: var(--main-padding);
}

#div2 {
  background-color: var(--main-bg-color);
  color: var(--main-txt-color);
  padding: var(--main-padding);
}

Try it Yourself »

CSS tutorial: CSS Variables

❮ CSS Functions Reference