CSS Custom Properties (Variables): A Practical 2026 Guide

CSS custom properties (variables) are one of the biggest CSS additions of the last decade. Unlike Sass variables, they live in the browser, can be changed at runtime, and inherit through the DOM — making them perfect for theming, dark mode, and component design.

The basics

:root {
  --primary: oklch(0.65 0.18 250);
  --radius: 12px;
}

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

Dark mode in 10 lines

:root {
  --bg: white;
  --fg: #111;
}
[data-theme="dark"] {
  --bg: #0b0b0e;
  --fg: #f5f5f7;
}
body { background: var(--bg); color: var(--fg); }

Fluid typography with clamp()

:root { --step-1: clamp(1rem, 0.9rem + 0.5vw, 1.25rem); }

Scoping variables to components

Define variables on the component root for reusable, prop-like APIs in pure CSS.