CSS variables, formally custom properties, are values you define with a name starting with two dashes, such as --brand: #0a66c2, and read with the var() function. They follow the cascade and inheritance like other properties, so they can be redefined on any element.
Why it matters
Unlike Sass variables, which are replaced at build time, custom properties exist in the browser. JavaScript can change them, media queries can override them and a component can set a local value that its children inherit. That makes theming, dark mode and design tokens practical in plain CSS without regenerating stylesheets.
Example
:root {
--brand: #0a66c2;
--gap: 1rem;
}
.card {
padding: var(--gap);
border-color: var(--brand, gray);
}
.card.warning { --brand: #b45309; }The second argument to var() is a fallback used if the property is undefined. The .warning card gets a different border color with no extra rules.
Common mistakes
- Expecting variables to work inside media query conditions;
var()cannot be used there. - Forgetting that custom properties inherit, so a value set deep in the tree does not affect ancestors.
- Using them for values that never change, adding indirection for no gain.
- Typos in names fail silently and produce an invalid value at computed time.
Related
Get notified when this term updates
Plus occasional practical tips on uptime and monitoring, nothing else. Unsubscribe anytime.
This page is general information written by our editorial team and updated when documentation changes. Servers and providers differ, so test changes safely first. See our editorial policy and disclaimer.