Spacing Scale Calculator

Generate a consistent spacing scale for your design system. Set a base unit and multiplier, see visual previews, and export as CSS custom properties or Tailwind configuration.

Spacing Scale Calculator

Generate consistent spacing scales for your design system. Set a base unit and multiplier, visualize the scale, and export as CSS or Tailwind config.

:root {
  --space-0: 0rem; /* 0px */
  --space-1: 0.25rem; /* 4px */
  --space-2: 0.5rem; /* 8px */
  --space-3: 1rem; /* 16px */
  --space-4: 2rem; /* 32px */
  --space-5: 4rem; /* 64px */
  --space-6: 8rem; /* 128px */
  --space-7: 16rem; /* 256px */
  --space-8: 32rem; /* 512px */
  --space-9: 64rem; /* 1024px */
}