What are CSS variables?

Learn the custom property (--name) concept.

What is a CSS variable?

A CSS variable (custom property) lets you store a value by name and reuse it. The name starts with two dashes: --color, --space, --size. After it is defined, you call it with var(--color).

Variables are CSS's own storage: write the brand color in one place, read it in ten. When the value changes, you only update the definition; every match updates automatically.

Why use variables?

Writing the same color or spacing in ten places is tiring and error-prone. Use var(--color) instead of #2563eb; when the brand color changes, you only update a single line in :root.

The result: consistent look, fewer mistakes, faster changes. Teammates also see at a glance which color is the brand color.

Design token

A design token is the smallest reusable unit of a brand: the brand color, spacing size, corner radius, shadow tone. You define these as variables and use them across the whole page for a consistent interface.

For example, --color-brand, --space-medium, --corner-radius are tokens. When a designer updates one token, the whole interface changes at once; the developer never needs to touch the styles.

Exercise Define your first variable

Inside the :root selector, define a variable named --bg with the value #0f172a.

Show example solution

open a :root selector and write --bg: #0f172a; inside.
Example solution:
:root {
  --bg: #0f172a;
}

Test yourself

Which is a valid CSS variable name?
- --color
- color
- $color
- @color
Show answer

--color — Correct. CSS variables start with two dashes: --color.
Match the concepts

--color

custom property name
var(--color)

variable usage
design token

reusable value
:root

global scope

Write a valid variable name

:root {
  ____: #2563eb;
}

Show answer

:root {
  --blue: #2563eb;
}

Next lesson: Defining variables

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies