CSS Variables (Custom Properties)

:root {
  --brand: #17a865;
  --radius: 12px;
}

.button {
  background: var(--brand);
  border-radius: var(--radius);
}

• Variable names start with two hyphens, as in --brand.
• :root refers to the <html> element, so variables defined there are available everywhere on the page.
• Read a variable's value with var(--name).

Variable names are case-sensitive: --Brand and --brand are two different variables.

var(--accent, orange) uses orange if --accent hasn't been defined. Fallbacks are useful in reusable components, where you can't be sure the page using them has set every variable.

Variables follow the normal CSS rules. You can redefine a variable on any element, and its children see the new value. That makes themes and component variations straightforward:

.card { --bg: white; background: var(--bg); }
.card.dark { --bg: #15161b; }

The same idea powers dark mode: define light colours on :root, then redefine the same variables inside a prefers-color-scheme: dark media query. Every rule that uses the variables switches automatically.

document.documentElement.style.setProperty('--brand', 'hotpink');

One line of JavaScript restyles everything that uses --brand. This is how colour pickers, theme switchers and "large text" buttons are often built.

Variables work inside other functions, which makes them even more powerful. You can store a base unit and multiply it, or store numbers and add units later:

:root { --space: 8px; --cols: 3; }
.card { padding: calc(var(--space) * 2); }
.grid { grid-template-columns: repeat(var(--cols), 1fr); }

This is how spacing scales and grids in design systems are built: change --space once and every gap, margin and padding that uses it changes in proportion. You can also combine variables with clamp() and color-mix() to build fluid sizes and colour tints from a few base values.