Spacing Scale Generator

About Spacing scale generator

Generate a spacing token list from one base unit. Each step multiplies the base by a familiar sequence of numbers, from 0 up to 64, and the tool draws a bar for each so you can see the rhythm. Export the list as CSS custom properties in pixels or rem.

How to use it

1. Set Base unit between 2 and 8 pixels; 4 is the default.
2. Set Steps between 6 and 17 to choose how much of the sequence to include.
3. Choose px or rem.
4. Compare the preview bars, which are capped at 300 pixels wide.
5. Copy the :root block from Generated CSS.

A 4 px scale, first steps

Base 4, 12 steps, px

--spacing-0: 0px;
--spacing-1: 4px;
--spacing-2: 8px;
--spacing-3: 12px;
--spacing-4: 16px;
--spacing-5: 20px;
--spacing-6: 24px;
--spacing-8: 32px;
--spacing-10: 40px;
--spacing-12: 48px;
--spacing-16: 64px;
--spacing-20: 80px;

When to use it

• Setting up margin and padding tokens for a small design system.
• Switching between a 4 px and an 8 px grid to see which feels right.
• Producing rem-based spacing that respects a user's font-size preference.
• Creating a consistent gap vocabulary for a new component library.

Questions about Spacing scale generator

Why do the step labels skip 7, 9 and 11?

The sequence is 0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24, 32, 40, 48, 64. Gaps appear where design systems rarely need an in-between value, keeping the scale short.

Are the labels pixels?

No, they are multipliers. --spacing-4 with a 4 px base equals 16 px, and with an 8 px base it equals 32 px.

How is rem computed?

The pixel result divided by 16, printed with three decimals, so a 4 px base gives 0.250rem for step 1.

Can I change the variable prefix?

Not in the interface. Names always start with --spacing-, so rename them after copying if your project uses another convention.

Related tools

• Color shades generatorGenerate a full 50–950 shade scale from any color — export as CSS variables or Tailwind config
• CSS transform generatorVisually combine translate, rotate, scale, and skew transforms with a live preview element
• Flexbox generatorVisual playground for all flexbox properties — live preview with colored items and CSS output
• CSS grid generatorDefine grid columns, rows, and gap visually — generates display:grid CSS ready to copy
• Typography scale generatorGenerate a modular type scale from base size and ratio — exports CSS custom properties
• Gradient generatorBuild CSS linear, radial, and conic gradients with custom stops, angles, and live preview