CSS Variables Generator
Define CSS custom properties for colors, spacing, fonts and more, then copy a ready-to-use :root block and a var() usage example.
- --
- --
- --
- --
- --
- --
- --
- --
- --
- --
:root {
--color-primary: #4A6CF7;
--color-secondary: #0E7C7B;
--color-text: #1A1D1F;
--color-bg: #FFFFFF;
--font-body: system-ui, -apple-system, sans-serif;
--font-size-base: 1rem;
--space-sm: 0.5rem;
--space-md: 1rem;
--space-lg: 2rem;
--radius: 8px;
}.example {
color: var(--color-primary);
padding: var(--space-sm);
border-radius: var(--radius);
font-family: var(--font-body);
}10 of 10 rows included. Rows need a valid name and a value.
What are CSS variables?
CSS variables, officially called custom properties, are named values such as --color-primary: #4A6CF7 that you declare once and reuse with var(--color-primary). They are usually defined on :root so the whole page can use them, and you can override them for a theme or a component. Changing one value updates every rule that references it.
How to use the CSS variables generator
- 1
Edit the starter variables or click Add variable to create your own. Names can use letters, numbers, hyphens and underscores.
- 2
Enter a value for each one: a color, a length such as 1rem, a font stack or any other CSS value. Color values show a swatch.
- 3
Optionally change the selector, for example to [data-theme="dark"], or add a prefix such as brand to namespace every name.
- 4
Copy the generated CSS into your stylesheet, then reference each value with var(), as shown in the usage example.
Frequently asked questions
What is the difference between CSS variables and Sass variables?
Sass variables are replaced with fixed values when the stylesheet is compiled, so they no longer exist in the browser. CSS custom properties stay live in the browser: they follow the cascade, can be changed per selector or media query, and can be updated with JavaScript at runtime.
Why are CSS variables defined on :root?
:root matches the html element, so variables declared there are inherited by every element on the page. Declare them on a narrower selector, such as .card, when a value should only apply inside that component.
Can I set a fallback value for a CSS variable?
Yes. var() accepts a second argument that is used when the variable is not defined, for example color: var(--color-accent, #333). The fallback can also be another variable.
How do I build a dark theme with CSS variables?
Declare your light values on :root, then declare the same names with dark values on a selector such as [data-theme="dark"] or inside @media (prefers-color-scheme: dark). You can use this generator twice, once for each selector, and paste both blocks into your stylesheet.
Related tools
Tokens are great. Build the design system page
Canvas Builder builds a full site using a consistent token-driven design system.