Spacing Scale Generator
The Spacing Scale Generator builds a spacing system from a 4, 5, 6 or 8 px base unit in 12, 16 or 20 steps and exports it as CSS custom properties in px or rem.
About this tool
The Spacing Scale Generator builds a spacing system from a 4, 5, 6 or 8 px base unit in 12, 16 or 20 steps and exports it as CSS custom properties in px or rem.
How to use it
- Choose a base unit, such as 4 px or 8 px.
- Pick px or rem output.
- Choose how many steps you need.
- Click Copy CSS Variables to add the scale to your stylesheet.
Good to know
- Tailwind CSS spacing is based on a 4 px (0.25 rem) unit.
- Material Design uses an 8 dp grid, with 4 dp for small adjustments.
- Multiples such as 0.5, 1, 1.5, 2, 3, 4, 6 and 8 cover most spacing needs.
- rem values here assume a 16 px root font size.
- A fixed scale replaces arbitrary pixel values and keeps layouts visually consistent.
Runs entirely in your browser — nothing you enter is uploaded or stored.
Frequently asked questions
Should I use a 4px or 8px spacing system?
8 px is a common default for layouts; 4 px gives finer control for dense interfaces and small components. Many teams use 4 px steps within an 8 px rhythm.
What is a spacing scale in design systems?
A predefined set of spacing values used for margins, padding and gaps, so every screen uses the same increments.
How do I use the scale in CSS?
Copy the variables and use them like padding: var(--space-4); so spacing stays consistent across components.
Is this the same as Tailwind spacing?
With a 4 px base and rem output the values follow the same multiples as Tailwind’s default spacing scale.