What are CSS custom properties?

CSS custom properties (also called CSS variables) are named values you define in your stylesheet and reference with var(). They cascade through the DOM, can be overridden by scope, and can be changed at runtime with JavaScript — unlike preprocessor variables.

Can I use CSS variables in media queries?

You can redefine variable values inside media queries, but you cannot use var() in the media query condition itself (e.g., @media (min-width: var(--breakpoint)) won't work). The condition must use a static value.

Do CSS variables work in all browsers?

CSS custom properties are supported in all modern browsers including Chrome, Firefox, Safari, and Edge. Internet Explorer 11 does not support them. Browser support has been universal since approximately 2017.

What is the var() fallback?

The var() function accepts an optional second argument that's used if the variable is undefined: var(--color, #333). You can chain fallbacks by nesting var() calls.

CSS Custom Properties (Variables): The Complete Guide

🎛️

Try CSS Variable Generator

Free, no signup →