var() CSS Function

Description

The CSS var() function is used to insert the value of a CSS variable into any property value. This can be useful for centralizing and reusing CSS values, making your code more maintainable and efficient.

To use the var() function, you first need to define a CSS variable. This is done by setting a custom property with a double-dash prefix, such as --main-color. Once you have defined a CSS variable, you can use the var() function to insert its value into any property value. For example:

/* Define a CSS variable */
--main-color: red;

/* Use the var() function to insert the value of the CSS variable into the background-color property */
body {
  background-color: var(--main-color);
}

You can also use the var() function to insert multiple fallback values. This is useful when working with Custom Elements and Shadow DOM. For example:

/* Define a CSS variable */
--main-color: red;

/* Use the var() function to insert the value of the CSS variable into the background-color property, with a fallback of blue */
body {
  background-color: var(--main-color, blue);
}

The var() function is a powerful tool that can help you to write more maintainable and efficient CSS code. It is supported by all major browsers.

Here are some of the benefits of using the CSS var() function:

  • Centralize and reuse CSS values: CSS variables allow you to centralize your CSS values in one place, making it easier to update and maintain your code.
  • Improve readability and maintainability: CSS variables can make your code more readable and maintainable by giving your CSS values meaningful names.
  • Increase flexibility: CSS variables allow you to change the values of your CSS properties at runtime, without having to modify your CSS code.
  • Support dynamic theming: CSS variables can be used to implement dynamic theming, allowing your users to switch between different themes at will.

Overall, the CSS var() function is a powerful and versatile tool that can be used to improve the quality and maintainability of your CSS code.

Syntax

<var()> = var( <custom-property-name> , <declaration-value>? )  

Values

  • <custom-property-name>A custom property's name represented by an identifier that starts with two dashes. Custom properties are solely for use by authors and users; CSS will never give them a meaning beyond what is presented here.
  • <declaration-value>The custom property's fallback value, which is used in case the custom property is invalid in the used context. This value may contain any character except some characters with special meaning like newlines, unmatched closing brackets, i.e. ), ], or }, top-level semicolons, or exclamation marks. The fallback value can itself be a custom property using the var() syntax.

Example

<div class="box">Primary Box</div>
<div class="custom-box">Custom Box</div>
/* Define a variable */
:root {
--primary-color: #3498db;
}

/* Use the variable */
.box {
width: 200px;
height: 200px;
background-color: var(--primary-color);
color: white;
text-align: center;
line-height: 200px;
}

/* Override the variable */
.custom-box {
background-color: var(--primary-color);
color: black;
}

Browser Support

The following table will show you the current browser support for the CSS var() function.

Desktop
Edge Chrome Firefox Opera Safari
154931369.1
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
4931369.3550

Last updated by CSSPortal on: 7th October 2023