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).

Is anything uploaded?

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

CSS Variables Generator

Build a :root block of CSS custom properties and copy it.

CSS variables generator

Define your design tokens as CSS custom properties and get a clean :root block to drop into any stylesheet. Add name and value pairs — colours, spacing, radii, fonts — and the tool normalises each name to valid custom-property syntax (leading --, no illegal characters). Reference them anywhere with var(--name).

Everything runs in your browser — nothing is uploaded.