How do I name a CSS custom property?

CSS custom properties must start with two dashes, for example --color-primary. This tool automatically adds the leading dashes and cleans up invalid characters.

How do I use a CSS variable?

Reference it with the var() function, for example color: var(--color-primary). You can also provide a fallback like var(--color-primary, #000).

Why put CSS variables in :root?

Declaring custom properties on :root makes them global, available to every element in the document. You can also scope variables to a specific selector to override them within that subtree.

Can a CSS variable have a fallback value?

Yes. The var() function takes a second argument used if the variable is undefined, for example var(--color-primary, #000) falls back to black.

Is anything uploaded?

No — the variables CSS is generated entirely in your browser.

CSS Variables Generator

This tool turns your design tokens — colours, spacing, radii, fonts — into a clean block of CSS custom properties (CSS variables) ready to drop into any stylesheet. Add name-and-value pairs and the generator normalises each name to valid syntax and outputs a :root block, so you can centralise your theme and reference it everywhere.

How it works

You enter name-and-value pairs. The tool normalises each name to valid custom-property syntax: it ensures a leading --, replaces illegal characters with hyphens, and trims stray dashes. Empty values default to initial. The cleaned pairs are wrapped in a :root { ... } block, which makes the variables global to the whole document. You then reference any of them with the var() function, optionally with a fallback.

Example

Three tokens become:

:root {
  --color-primary: #6366f1;
  --spacing: 16px;
  --radius: 8px;
}

Use them anywhere with var():

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

Everything runs in your browser — nothing is uploaded.