Turn name:value pairs into a clean :root custom-property block — names normalized to kebab-case, with usage examples for CSS and JavaScript and an optional dark-mode override skeleton.
Show calculation steps
Processed privately in your browser — nothing you paste is uploaded, logged or stored.
From list to :root in one paste
Custom properties are the runtime backbone of theming — but writing the boilerplate is tedium. List your tokens one per line (any of brand-primary, brandPrimary or brand_primary — names normalize to kebab-case), optionally add a prefix, and get the :root block plus the three usage patterns everyone looks up: var(), var() with fallback, and JavaScript read/write.
Worked example
:root {
--brand-primary: #6366f1;
--spacing-md: 16px;
}
.example { color: var(--brand-primary); }
/* JS */
document.documentElement.style.setProperty('--brand-primary', '#4f46e5');Why :root
- :root is the html element — properties declared there cascade everywhere, making it the single source of truth. Scoped overrides (.dark, a component class) re-declare only what changes; the optional dark-skeleton output starts that file for you.
CSS vs SCSS variables — the decision
- Custom properties live at RUNTIME: they cascade, respond to media queries and JavaScript — which is what makes theme switching possible. SCSS variables compile away (the SCSS sibling exists for build-time needs). Modern default: CSS custom properties.
Related workflow
- Generated color scales from the Design Token Generator arrive pre-formatted; this tool is for hand-curated token lists.
How to use the CSS Variables Generator
- List tokens one per line as name: value — camelCase and snake_case are normalized.
- Optionally set a prefix and include the dark-mode override skeleton.
- Copy the :root block with the usage examples.
Frequently asked questions
Why declare variables on :root?
:root is the html element, so custom properties declared there cascade everywhere — one place to define, var(–name) anywhere to use. Scoped overrides (like .dark) then re-declare just what changes.
How do CSS variables differ from SCSS variables?
CSS custom properties live at RUNTIME — they cascade, respond to media queries and can be changed from JavaScript, which is what makes theme switching possible. SCSS variables compile away. The JS access patterns are included in the output.
What is the fallback syntax for?
var(–brand, #000) uses #000 when the property is undefined — insurance for component CSS that might load without your token sheet.
Turn a palette into design tokens
The same palette as named tokens, as CSS custom properties, and as a Figma token file.
- Color Palette GeneratorProduce the palette the tokens will describe.
- Semantic Color Token GeneratorGive the colours role names rather than colour names.
- Design Token GeneratorBuild the token set from those roles.
- CSS Variables Generator you are hereEmit the tokens as CSS custom properties.
- Figma Token JSON GeneratorEmit the same tokens in the format Figma reads.
