CSS Variables

CSS variables, officially called custom properties, store values you reuse across a stylesheet. Declare them with two dashes, like --brand: #2563eb, and read them with var(--brand). Change the variable once and every use updates.

Declaring and Using Variables

Variables declared on :root are global. var() also takes a fallback value used when the variable is missing.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS Example</title>
<style>
:root {
  --brand: #7c3aed;
  --radius: 10px;
  --space: 16px;
}
.btn { background: var(--brand); color: white; border: 0; padding: var(--space); border-radius: var(--radius); }
.box { border: 2px solid var(--brand); padding: var(--space); border-radius: var(--radius); margin-top: var(--space); }
.fallback { color: var(--missing, darkorange); }
</style>
</head>
<body>
<button class="btn">Brand button</button>
<div class="box">Same color and radius, defined once.</div>
<p class="fallback">This uses a fallback color.</p>
</body>
</html>

Scoped Variables

Variables inherit like other properties, so redefining one on an element changes it only for that element and its children.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS Example</title>
<style>
:root { --accent: #2563eb; }
.danger { --accent: #dc2626; }
.tag { color: white; background: var(--accent); padding: 4px 10px; border-radius: 6px; font-family: sans-serif; }
</style>
</head>
<body>
<span class="tag">Default</span>
<span class="danger"><span class="tag">Danger</span></span>
</body>
</html>

Dark Mode With CSS Variables

Define light colors by default and override them inside a prefers-color-scheme media query. The rest of the CSS only uses the variables.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS Example</title>
<style>
:root { --bg: #ffffff; --text: #111827; --card: #f3f4f6; }
@media (prefers-color-scheme: dark) {
  :root { --bg: #0f172a; --text: #e5e7eb; --card: #1e293b; }
}
body { background: var(--bg); color: var(--text); font-family: sans-serif; }
.card { background: var(--card); padding: 20px; border-radius: 10px; }
</style>
</head>
<body>
<div class="card">This card follows your system light or dark theme.</div>
</body>
</html>

Tips

• Names are case sensitive: --Brand and --brand are different
• Keep design tokens (colors, spacing, fonts) on :root
• JavaScript can change them: element.style.setProperty("--brand", "red")
• Variables cannot be used in media query conditions

Frequently asked questions

What is :root in CSS?

:root matches the top html element. Declaring variables there makes them available everywhere on the page.

Are CSS variables the same as Sass variables?

No. Sass variables are replaced at build time, while CSS variables live in the browser, inherit, and can change at runtime with media queries or JavaScript.

Do CSS variables work in all browsers?

Yes, all modern browsers support CSS custom properties.