Design Tools

Spacing Scale Generator

Generate consistent spacing scales (linear or geometric) with visual bars and CSS variable output.

Base (px)

Steps

Mode

:root {
  --spacing-step-1: 4px;
  --spacing-step-2: 8px;
  --spacing-step-3: 12px;
  --spacing-step-4: 16px;
  --spacing-step-5: 20px;
  --spacing-step-6: 24px;
  --spacing-step-7: 28px;
  --spacing-step-8: 32px;
  --spacing-step-9: 36px;
  --spacing-step-10: 40px;
}

step-1

4px0.250rem

step-2

8px0.500rem

step-3

12px0.750rem

step-4

16px1.000rem

step-5

20px1.250rem

step-6

24px1.500rem

step-7

28px1.750rem

step-8

32px2.000rem

step-9

36px2.250rem

step-10

40px2.500rem

🍪 Cookie Preferences