What is the CSS Spacing Generator?
Generate consistent margin and padding scales based on a base unit. Export as CSS custom properties or Tailwind-compatible values.
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 Spacing 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.
Set your base unit
Enter a base spacing value in px or rem. 4px (0.25rem) is the standard choice, matching Tailwind and Material Design.
Choose your scale type
Linear (multiples of base), modular (ratio-based), or custom. Linear 4px scales are most common for UI spacing.
Export the scale
Copy as CSS custom properties for native CSS, or as a JavaScript object for design token workflows.
What the generated code looks like
Clean, production-ready CSS — no vendor bloat, no unnecessary declarations.
:root {
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px; /* base */
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--space-10: 40px;
--space-12: 48px;
--space-16: 64px;
--space-20: 80px;
--space-24: 96px;
}Reference spacing with var(--space-4) throughout your components. Changing the base unit updates every value at once.
Pro tips for better results
A 4px base unit matches most design systems
Tailwind, Material Design, and Ant Design all use 4px as their base unit. Sticking to multiples of 4 makes designs feel consistent and simplifies collaboration with designers.
Limit your scale to 8-10 values
More spacing tokens than you need creates decision fatigue. Cover the range from 4px to 96px with 8-10 named stops. Use the closest token rather than adding new ones.
Use rem for spacing when fonts are user-resizable
rem-based spacing scales with user font size preferences, improving accessibility. 1rem = 16px by default. 0.25rem = 4px, 1rem = 16px, 1.5rem = 24px.
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.