Spacing Scale Calculator
Create a harmonious spacing scale from a base unit and multiplier. Choose from common patterns like multiples of 4 (4, 8, 12, 16, 24, 32, 48, 64) or 8 (8, 16, 24, 32, 48, 64, 96), or define a custom scale. Preview the visual proportions of each spacing value. Export as CSS custom properties or Tailwind CSS spacing configuration. Essential for maintaining consistent margins, paddings, and gaps across your design system.
| Step | px | rem | Visual |
|---|---|---|---|
| 1 | 4px | 0.25rem | |
| 2 | 8px | 0.5rem | |
| 3 | 12px | 0.75rem | |
| 4 | 16px | 1rem | |
| 5 | 24px | 1.5rem | |
| 6 | 32px | 2rem | |
| 7 | 48px | 3rem | |
| 8 | 64px | 4rem | |
| 9 | 96px | 6rem | |
| 10 | 128px | 8rem |
--space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px;
spacing: {
'1': '4px',
'2': '8px',
'3': '12px',
'4': '16px',
'5': '24px',
'6': '32px',
'7': '48px',
'8': '64px',
'9': '96px',
'10': '128px'
}How to Use
- 1
Set Base Unit
Enter your base spacing unit in pixels (commonly 4px or 8px).
- 2
Choose Scale
Select a linear or geometric scale pattern, or define custom multipliers.
- 3
Export
Copy the scale as CSS custom properties or Tailwind CSS spacing config.
Examples by Niche
Base: 4px, Linear → 4, 8, 12, 16, 20, 24, 32, 40, 48, 64 px
Base: 4px → spacing: { 1: "4px", 2: "8px", 3: "12px", 4: "16px", ... }
Base: 8px, Geometric → 8, 16, 32, 64, 128 px for dramatic spacing contrast
Frequently Asked Questions
What base unit should I use?
A base unit of 4px is the most common choice, producing values of 4, 8, 12, 16, 20, 24, etc. This aligns with most UI frameworks and design tools. 8px base is also popular for larger-scale designs.
Can I export for Tailwind CSS?
Yes, the tool outputs a Tailwind CSS spacing configuration object that you can paste directly into your tailwind.config.js theme.extend.spacing section.
How many spacing values should I have?
Most design systems use 8-12 spacing values. Too few limits flexibility, too many creates decision fatigue. The tool generates a balanced scale by default.
What base spacing value works best for web design?
A base value of 4px or 8px is most common in web design systems. An 8px base creates spacing values of 8, 16, 24, 32, 48, and 64 pixels, which align well with common component sizes and line heights. The 4px base provides finer granularity (4, 8, 12, 16, 24, 32) for dense interfaces like dashboards.