Home > Tips & Tricks > var() Function in CSS

var() Function in CSS

The var() function in CSS is a powerful feature that enables developers to define and use custom CSS variables. It is also known as custom properties.

This function enhances code maintainability and flexibility by allowing the reuse of values throughout a stylesheet, making it easier to update styles across multiple elements from a single location.

To use the var() function, you first need to define a custom property (global variable) using the -- prefix followed by a name and value pair, like so:

Define Custom Property Name and Value

:root {
    --primary-color: #007bff;

In this example, --primary-color is a custom property set to the hex color #007bff. The :root pseudo-class is used to declare global CSS variables that can be accessed anywhere within the document.

Let’s now see how you can use the var() function in CSS code.

Using var() Function

Once defined the custom property, you can use the var() function to reference the custom property’s value in other CSS declarations, like this:

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

Here, the background-color property of the button element is set to the value of --primary-color, which is #007bff. This allows you to maintain consistency across your stylesheets and easily update the primary color of buttons by modifying the value of --primary-color in one place.

Callback in var() Function

Furthermore, the var() function supports fallback values, ensuring compatibility with browsers that do not support CSS variables. See the following example of handling callback.

button {
    color: var(--text-color, #333);

In this case, if --text-color is not defined, the button’s text color defaults to #333. This fallback mechanism provides graceful degradation for older browsers.

The var() function is not limited to color values; it can be used with any CSS property, including dimensions, fonts, and box shadows.

More Tricks


What is the var() function in CSS?

The var() function in CSS allows developers to define and use custom properties, enhancing code maintainability and flexibility.

How do fallback values work with var() functions in CSS?

Fallback values can be specified within var() functions to ensure compatibility with browsers that do not support CSS variables, providing graceful degradation in styling.

Photo of author

About Aman Mehra

Hey there! I'm Aman Mehra, a full-stack developer with over six years of hands-on experience in the industry. I've dedicated myself to mastering the ins and outs of PHP, WordPress, ReactJS, NodeJS, and AWS, so you can trust me to handle your web development needs with expertise and finesse. In 2021, I decided to share my knowledge and insights with the world by starting this blog. It's been an incredible journey so far, and I've had the opportunity to learn and grow alongside my readers. Whether you're a seasoned developer or just dipping your toes into the world of web development, I'm here to provide valuable content and solutions to help you succeed. So, stick around, explore the blog, and feel free to reach out if you have any questions or suggestions. Together, let's navigate the exciting world of web development!

Leave a Comment