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);
}

When would you actually use this?

The most common reason to reach for a :root block is when you are building a design system or a component library and need a single file that controls every visual decision. Instead of scattering colour hex codes and spacing values across dozens of .css files, you define them once as variables and update a single number to repaint the whole UI. It also makes dark-mode straightforward: a [data-theme="dark"] selector can override a subset of those same names without touching any component styles.

Another practical use case is generating a block to hand off to a colleague or copy into an existing project. If a designer shares a Figma file with a colour palette, you can type the names and hex values here and produce a clean, ready-to-paste block rather than writing each --color-: entry by hand.

Naming conventions that keep variables maintainable

There is no enforced convention, but a few patterns save headaches later:

• Category prefix first: --color-, --space-, --font-, --radius- make it easy to grep and to understand what a variable controls at a glance.
• Semantic over literal: --color-action ages better than --color-indigo-600 because you can change the hue without renaming every reference across your codebase.
• Scale with numbers: --space-1, --space-2, --space-4 (or --space-xs through --space-2xl) let you grow the system predictably.

Scoping variables beyond :root

The :root scope makes a variable globally available, but you are not limited to that. The same -- syntax works on any selector:

.card {
  --radius: 12px;
  border-radius: var(--radius);
}

.button {
  --radius: 9999px; /* pill shape */
  border-radius: var(--radius);
}

Here --radius inside .button overrides the :root value only within that element’s subtree, while other elements keep the global default. This technique is useful for component-level theming without a full CSS-in-JS solution.

Everything runs in your browser — nothing is uploaded.