CSS var() Function

CSS Functions

Example

Define a property named "--main-bg-color" and then use the var() function to call this property:

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

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

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

Definition and Usage

The var() function is used to insert the value of a custom property. It is useful when a property value is used in multiple places.

Supported Versions: CSS3

Browser Support

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

Function	Chrome	Edge	Firefox	Safari	Opera
var()	49.0	15.0	31.0	9.1	36.0

CSS Syntax

var(custom-property-name, value)

Value	Description
custom-property-name	Required. The name of the custom property, must start with --.
value	Optional. Fallback value, used when the custom property is not defined.

More Examples

Example

Using the var() function to call multiple custom 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);
}

CSS Functions

❮ Css3 Pr Target Name Pr Print Pageba ❯