CSS var() Function

Definition and Usage

CSS's var() Function to insert the value of CSS variables.

Example

Example 1

First, declare a global variable named --main-bg-color, and then use it in the stylesheet. var() Function to insert the value of the variable:

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

Try It Yourself

Example 2

Another example using var() Example of inserting multiple CSS variable values with a function:

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

var(--name, value)

Technical Details

Browser Support

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

Related Pages

Tutorial:CSS Variables