Spacing Scale Generator

Generate consistent spacing scales for design systems

Base Unit (px)

Scale Type

Number of Steps

Visual Preview

4px

8px

16px

32px

64px

128px

256px

512px

1024px

2048px

4096px

8192px

Spacing Values

--spacing-04px

--spacing-18px

--spacing-216px

--spacing-332px

--spacing-464px

--spacing-5128px

--spacing-6256px

--spacing-7512px

--spacing-81024px

--spacing-92048px

--spacing-104096px

--spacing-118192px

CSS Variables

:root {
  --spacing-0: 4px;
  --spacing-1: 8px;
  --spacing-2: 16px;
  --spacing-3: 32px;
  --spacing-4: 64px;
  --spacing-5: 128px;
  --spacing-6: 256px;
  --spacing-7: 512px;
  --spacing-8: 1024px;
  --spacing-9: 2048px;
  --spacing-10: 4096px;
  --spacing-11: 8192px;
}

Tailwind Config

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      spacing: {
        "0": "4px",
        "1": "8px",
        "2": "16px",
        "3": "32px",
        "4": "64px",
        "5": "128px",
        "6": "256px",
        "7": "512px",
        "8": "1024px",
        "9": "2048px",
        "10": "4096px",
        "11": "8192px"
}
    }
  }
}