CSS Custom Properties

Learn how CSS custom properties work and how to use CSS variables for colors, spacing, fonts, themes, and reusable values.

What they do —

CSS custom properties let you save reusable values in your CSS.

Most people call them CSS variables. They are useful for colors, font sizes, spacing, borders, themes, and repeated layout values.

Basic example —

A custom property starts with two dashes.

:root {
  --main-color: #a829a7;
}

a {
  color: var(--main-color);
}

In plain English, --main-color stores the color, and var(--main-color) uses it.

Why :root is common —

You will often see custom properties placed inside :root.

That makes the values available across the whole page.

:root {
  --page-bg: #e8e9fe;
  --text-color: #111;
  --accent-color: #a829a7;
}

Copy-paste starter —

This is a simple starter set for a small website.

:root {
  --color-bg: #e8e9fe;
  --color-card: #f4eba2;
  --color-text: #111;
  --color-link: #a829a7;

  --space-small: 8px;
  --space-medium: 16px;
  --space-large: 28px;

  --radius-small: 8px;
  --radius-medium: 12px;

  --font-body: 16px;
  --line-height-body: 1.5;
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-size: var(--font-body);
  line-height: var(--line-height-body);
}

.card {
  background: var(--color-card);
  border-radius: var(--radius-medium);
  padding: var(--space-medium);
}

a {
  color: var(--color-link);
}

Changing one value —

The main benefit is that you can change one value and update every place that uses it.

:root {
  --button-bg: #111;
  --button-text: #fff;
}

.button {
  background: var(--button-bg);
  color: var(--button-text);
}

.form-button {
  background: var(--button-bg);
  color: var(--button-text);
}

Change --button-bg once, and both buttons update.

Fallback values —

You can add a fallback value in case the custom property is missing.

.box {
  color: var(--text-color, #111);
}

That means use --text-color if it exists. If not, use #111.

With fluid typography —

Custom properties work well with clamp() because you can save your fluid font sizes in one place.

:root {
  --font-body: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
  --font-heading: clamp(2rem, 1.4rem + 3vw, 4.5rem);
}

body {
  font-size: var(--font-body);
}

h1 {
  font-size: var(--font-heading);
}

Why they are useful —

CSS custom properties make your stylesheet easier to update.

Instead of hunting through a file for the same color, size, or spacing value over and over, you keep the important values near the top and reuse them where needed.

Common use cases —

Use custom properties for site colors, button colors, link colors, spacing, border radius, font sizes, shadows, light and dark themes, and reusable layout values.

Common mistakes —

Do not make variable names too vague. Names like --thing, --color1, or --size get confusing fast.

Use names that explain the job, like --color-link, --space-medium, or --font-heading.

When to use them —

Use CSS custom properties when the same values are used in more than one place, or when you want a site to be easier to adjust later.

When to skip them —

Skip them for one-off values that are only used once and probably will not matter anywhere else.

Related pages —

Learn more about CSS clamp, fluid typography, CSS container queries, or browse more webdev examples.

Home Contact Privacy Policy Terms of Use Disclaimer Donate