Spacing Scale Generator

Generate consistent spacing scales and export as CSS variables, JSON, or Tailwind config.

Configuration

Base Size (px)

Scale Type

Steps10

Multiplier1

Output Unit

Visual Scale

4px

8px

12px

16px

20px

24px

28px

32px

36px

40px

Scale Table

Step	px	rem	em	Class Name
1	4px	0.25rem	0.25em	space-1
2	8px	0.5rem	0.5em	space-2
3	12px	0.75rem	0.75em	space-3
4	16px	1rem	1em	space-4
5	20px	1.25rem	1.25em	space-5
6	24px	1.5rem	1.5em	space-6
7	28px	1.75rem	1.75em	space-7
8	32px	2rem	2em	space-8
9	36px	2.25rem	2.25em	space-9
10	40px	2.5rem	2.5em	space-10

CSS Custom Properties

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

JSON

{
  "space-1": "4px",
  "space-2": "8px",
  "space-3": "12px",
  "space-4": "16px",
  "space-5": "20px",
  "space-6": "24px",
  "space-7": "28px",
  "space-8": "32px",
  "space-9": "36px",
  "space-10": "40px"
}

Tailwind Config

// tailwind.config.js
module.exports = {
  theme: {
    spacing: {
      '1': '4px',
      '2': '8px',
      '3': '12px',
      '4': '16px',
      '5': '20px',
      '6': '24px',
      '7': '28px',
      '8': '32px',
      '9': '36px',
      '10': '40px',
    },
  },
};