CSS Variable Generator
Turn a set of colors into a production-ready block of CSS custom properties. Add names, pick a prefix, and copy a clean :root block ready for any stylesheet.
What are CSS variables?
CSS custom properties (also called CSS variables) are runtime-configurable values stored under a name. Unlike Sass variables, they are processed by the browser, so they can be changed at runtime — including per element, per theme, or per media query.
:root {
--color-primary: #4f46e5;
}
.button {
background-color: var(--color-primary);
}Two-layer naming convention
The most maintainable systems use primitive tokens plus semantic tokens.
:root {
/* Primitives */
--blue-500: #4f46e5;
--gray-100: #f3f4f6;
--gray-900: #111827;
/* Semantic */
--color-primary: var(--blue-500);
--color-surface: var(--gray-100);
--color-text: var(--gray-900);
}Dark mode with variables
Because variables can be redefined on any selector, dark mode is a matter of redeclaring a handful of values.
[data-theme='dark'] {
--color-surface: #0b0f17;
--color-text: #f1f5f9;
}
@media (prefers-color-scheme: dark) {
:root {
--color-surface: #0b0f17;
--color-text: #f1f5f9;
}
}Frequently asked questions
What is a good naming convention?
Use primitive tokens like --blue-500 for the raw palette, and semantic tokens like --color-primary or --color-surface for roles. Components should always use semantic tokens so themes can be swapped without touching component CSS.
How do CSS variables differ from Sass variables?
Sass variables are compiled into static values at build time. CSS custom properties are resolved at runtime and can be updated by the browser — for example, when a user toggles a theme.
Can I animate or transition CSS variables?
You can transition any property that consumes a variable, but the variable itself is not animatable by default in most browsers. A common pattern is to transition the concrete property (for example background-color) while the variable changes underneath it.
Does the tool work offline?
Yes. Everything runs locally in your browser. No upload, no account, no network request.