What is CSS Custom Properties (Variables)?

What are CSS Custom Properties (Variables)?

CSS custom properties, often called CSS variables, let stylesheets define reusable values. For example, --brand-color: #0f766e; can be declared once and reused for buttons, links, borders, and icons.

How Do They Work?

Variables are often defined on :root and read with var(--brand-color). Because they participate in the CSS cascade, they can be overridden inside a component, section, or theme. This makes them different from preprocessor variables: they can change live in the browser.

:root {
  --space-md: 1rem;
  --brand-color: #0f766e;
}

.button {
  padding: var(--space-md);
  background: var(--brand-color);
}

Where Are They Used?

• Design tokens such as color, spacing, radius, shadow, and font values
• Dark mode and multi-theme support
• Component variants and brand customization
• Runtime theme or user preference changes through JavaScript

What to Watch

Variable names should match the design system. Raw names such as --blue-500 are less flexible than semantic names such as --color-primary or --surface-warning. If a value may be missing, var(--x, fallback) can provide a fallback.

Business Use

CSS variables are useful for multi-brand interfaces, dashboard themes, and white-label products because the same component code can adopt different visual identities. Design changes can then be managed from a smaller set of shared tokens.