Spacing Scale Generator

v1.0.0

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

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 */
}