Spacing Scale Generator

v1.0.1

Generate and preview CSS spacing scales based on Tailwind, 8px grid, golden ratio, or custom multiplier.

Generates CSS spacing scales based on Tailwind's default scale, an 8px grid, golden ratio, or a custom multiplier — outputs CSS custom properties (--space-1, --space-2…) ready to paste.

How to use

→Select a scale type and configure the base size and step count.
→Preview the scale as a visual ruler to check proportions.
→Copy the :root { --space-N: Xpx; } block into your design system CSS.

Scale type

Step	px	rem	Token
0	0	0.0000	spacing-0
0.5	2	0.1250	spacing-0.5
1	4	0.2500	spacing-1
1.5	6	0.3750	spacing-1.5
2	8	0.5000	spacing-2
2.5	10	0.6250	spacing-2.5
3	12	0.7500	spacing-3
3.5	14	0.8750	spacing-3.5
4	16	1.0000	spacing-4
5	20	1.2500	spacing-5
6	24	1.5000	spacing-6
7	28	1.7500	spacing-7
8	32	2.0000	spacing-8
9	36	2.2500	spacing-9
10	40	2.5000	spacing-10
11	44	2.7500	spacing-11
12	48	3.0000	spacing-12
14	56	3.5000	spacing-14
16	64	4.0000	spacing-16
20	80	5.0000	spacing-20
24	96	6.0000	spacing-24
28	112	7.0000	spacing-28
32	128	8.0000	spacing-32
36	144	9.0000	spacing-36
40	160	10.0000	spacing-40
44	176	11.0000	spacing-44
48	192	12.0000	spacing-48
56	224	14.0000	spacing-56
64	256	16.0000	spacing-64
72	288	18.0000	spacing-72
80	320	20.0000	spacing-80
96	384	24.0000	spacing-96

CSS Custom Properties

:root {
  --spacing-0: 0.0000rem; /* 0px */
  --spacing-0.5: 0.1250rem; /* 2px */
  --spacing-1: 0.2500rem; /* 4px */
  --spacing-1.5: 0.3750rem; /* 6px */
  --spacing-2: 0.5000rem; /* 8px */
  --spacing-2.5: 0.6250rem; /* 10px */
  --spacing-3: 0.7500rem; /* 12px */
  --spacing-3.5: 0.8750rem; /* 14px */
  --spacing-4: 1.0000rem; /* 16px */
  --spacing-5: 1.2500rem; /* 20px */
  --spacing-6: 1.5000rem; /* 24px */
  --spacing-7: 1.7500rem; /* 28px */
  --spacing-8: 2.0000rem; /* 32px */
  --spacing-9: 2.2500rem; /* 36px */
  --spacing-10: 2.5000rem; /* 40px */
  --spacing-11: 2.7500rem; /* 44px */
  --spacing-12: 3.0000rem; /* 48px */
  --spacing-14: 3.5000rem; /* 56px */
  --spacing-16: 4.0000rem; /* 64px */
  --spacing-20: 5.0000rem; /* 80px */
  --spacing-24: 6.0000rem; /* 96px */
  --spacing-28: 7.0000rem; /* 112px */
  --spacing-32: 8.0000rem; /* 128px */
  --spacing-36: 9.0000rem; /* 144px */
  --spacing-40: 10.0000rem; /* 160px */
  --spacing-44: 11.0000rem; /* 176px */
  --spacing-48: 12.0000rem; /* 192px */
  --spacing-56: 14.0000rem; /* 224px */
  --spacing-64: 16.0000rem; /* 256px */
  --spacing-72: 18.0000rem; /* 288px */
  --spacing-80: 20.0000rem; /* 320px */
  --spacing-96: 24.0000rem; /* 384px */
}