PapaTools

Free Spacing Scale Generator

0
0px
1
4px
2
8px
3
12px
4
16px
5
20px
6
24px
7
32px
8
40px
9
48px
:root {
  --space-0: 0rem;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 2rem;
  --space-8: 2.5rem;
  --space-9: 3rem;
}

Something not working? Report a problem

About the Spacing Scale Generator

Generate a consistent spacing scale from a base unit and ratio — preview each step as a coloured bar and copy as CSS custom properties or a Tailwind config, all in your browser.

How to use the Spacing Scale Generator

  1. 1Set a base unit (the smallest spacing increment, e.g. 4px).
  2. 2Choose a scale type — Linear multiplies by a fixed step; Modular multiplies by a ratio.
  3. 3Select how many steps you need in your scale.
  4. 4Copy the CSS custom properties or Tailwind config and add them to your project.

Frequently asked questions

What is a spacing scale?

A spacing scale is a predefined set of margin, padding and gap values that keep your UI consistent. Instead of arbitrary pixel values, every element uses a value from the scale — typically powers of 2 or a modular ratio of a base unit.

What base unit should I use?

4px is the most popular base for web UIs (it's the default in Tailwind CSS). 8px gives a chunkier feel. Designers working with 8-point grids use 8px. Stick to one base across your project.

Linear vs modular — which should I use?

Linear scales (multiply by 2, 4, 8…) are predictable and easy to remember. Modular scales (ratio like 1.5×) grow exponentially and create more dramatic size differences at the large end.

Is this tool client-side only?

Yes — all computation runs in your browser. No data leaves your machine.

More design tools

View all
CSS Gradient GeneratorBuild linear, radial or conic CSS gradients visually — add colour stops, set direction and angle, get instant preview and copy the ready-to-paste CSS, all in your browser.Box Shadow GeneratorCreate single or layered CSS box shadows with live controls for offset, blur, spread, colour and inset — preview on a card and copy the CSS in one click.Color Palette GeneratorGenerate a 5-colour palette from a seed colour (complementary, analogous, triadic and more) or extract dominant colours from any image — copy hex/RGB/HSL or download as a PNG swatch sheet.Contrast CheckerCheck foreground/background colour contrast against WCAG 2.1 AA and AAA — live preview text on the chosen background with a one-click fix for failing combinations.