What is the CSS Variables Generator?
Generate a complete CSS custom properties token set for colours, spacing, typography, and shadows. One file to rule your design system.
Everything runs locally in your browser. Adjust the controls above, preview instantly, and copy clean, production-ready CSS — no account, no upload.
Using the CSS Variables Generator
Everything lives in the panel at the top of this page. There is nothing to install — it all runs right here in your browser.
Choose token categories
Enable or disable token groups: colours, spacing, typography, shadows, and radius. Only the selected groups are included in the output.
Set your primary colour
Enter your brand primary hex colour. The generator calculates the hover state automatically by darkening the primary by 15%.
Copy the :root block
Paste into your global CSS file. Reference tokens throughout your stylesheets with var(--token-name).
What the generated code looks like
Clean, production-ready CSS — no vendor bloat, no unnecessary declarations.
:root {
/* Colors */
--color-primary: #0071e3;
--color-primary-hover: #005bb5;
--color-bg: #ffffff;
--color-surface: #f5f5f7;
--color-text: #1d1d1f;
--color-text-secondary: #86868b;
--color-border: #e5e7eb;
/* Spacing */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-6: 24px;
--space-8: 32px;
/* Typography */
--font-size-sm: 0.875rem;
--font-size-base: 1rem;
--font-size-lg: 1.125rem;
--font-size-xl: 1.25rem;
/* Radius */
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 16px;
}Common mistakes & how to fix them
A few habits trip people up. Here is what to watch for — and the exact fix.
Redefining the same value in multiple places
If a colour or spacing value is hardcoded 40 times across your CSS, changing it requires 40 find/replace operations.
Fix: Define values as CSS variables in :root once. Every usage becomes var(--token). A rebrand is then one line in one file.
Deeply nested custom property names
--btn-primary-hover-bg-border-radius is too specific. It cannot be reused and creates token sprawl.
Fix: Use two-level naming: semantic.primitive. --color-primary is the primitive; --btn-bg uses it. Do not embed component and state in the token name.
Pro tips for better results
Override variables in component scope, not with new values
Instead of --card-bg: #f5f5f7, write .card { --color-bg: #f5f5f7 }. This scopes the override without creating new tokens.
CSS variables are live at runtime
JavaScript can read and write CSS variables: document.documentElement.style.setProperty("--color-primary", "#ff0000"). This powers theme switching without a page reload.
Frequently asked questions
From the blog
Read more →Modern CSS techniques every developer should know
A practical tour of the CSS features that replaced yesterday’s hacks.
From design to code without the friction
How visual generators speed up the build without sacrificing clean output.
Writing CSS that scales with your project
Tokens, naming, and structure that keep large stylesheets maintainable.