var() CSS Function

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The var() CSS function is used to insert the value of a custom property (also known as a CSS variable) into other style rules. It allows you to define reusable values in one place and reference them throughout your stylesheet, which makes managing themes, colors, spacing, and other repeated values much easier. Custom properties themselves are declared using the --property-name syntax, and var() retrieves their value wherever needed.

One key feature of var() is that it can accept a fallback value, which will be used if the referenced custom property is not defined. This ensures that your styles remain robust and avoid unexpected invalid values.

For example, you can use var() with color or background-color like this:

:root {
  --main-color: #3498db;
  --secondary-color: #2ecc71;
}

button {
  background-color: var(--main-color);
  border: 2px solid var(--secondary-color, #000); /* fallback if --secondary-color is missing */
  color: var(--text-color, white); /* fallback to white if --text-color is missing */
}

var() can also be used in combination with functions such as calc() for dynamic sizing:

:root {
  --spacing: 16px;
}

.container {
  padding: calc(var(--spacing) * 2);
}

This approach allows you to centralize control of key style values, making it easy to update themes or design tokens across an entire project without manually changing each instance.

Additionally, var() can be applied to virtually any CSS property that accepts a value, including font-size, margin, and width, making it a versatile tool in modern CSS development.

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

HTML

<body>



  <div class="container">

    <div class="card">

      <h1>CSS Variables</h1>

      <p>The background and text colors of this card are set using the var() function.</p>

      <button class="btn">Click Me</button>

    </div>

  </div>



</body>

CSS

/* 1. Define the variables in the :root */

:root {

  --primary-color: #4a90e2;

  --secondary-color: #2c3e50;

  --bg-color: #f4f4f4;

  --card-padding: 20px;

  --border-radius: 8px;

}



/* 2. Use the variables with the var() function */

body {

  background-color: var(--bg-color);

  font-family: sans-serif;

  display: flex;

  justify-content: center;

  align-items: center;

  height: 100vh;

}



.card {

  background-color: white;

  padding: var(--card-padding);

  border-radius: var(--border-radius);

  border-top: 5px solid var(--primary-color);

  box-shadow: 0 4px 6px rgba(0,0,0,0.1);

  max-width: 300px;

}



h1 {

  color: var(--secondary-color);

}



.btn {

  background-color: var(--primary-color);

  color: white;

  border: none;

  padding: 10px 15px;

  border-radius: var(--border-radius);

  cursor: pointer;

}



.btn:hover {

  /* You can even perform math or slight adjustments */

  opacity: 0.8;

}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS var() function. Hover over a browser icon to see the version that first introduced support for this CSS function.