CP

CSS Spacing Generator

Home/Tools/Spacing Generator

Create consistent spacing scales for margin and padding.

No sign-up neededRuns in your browserProduction-ready CSS

Scale Preset

Unit

Spacing Scale

0
0.000rem
0.5
0.125rem
1
0.250rem
1.5
0.375rem
2
0.500rem
2.5
0.625rem
3
0.750rem
3.5
0.875rem
4
1.000rem
5
1.250rem
6
1.500rem
8
2.000rem
10
2.500rem
12
3.000rem
16
4.000rem
20
5.000rem
24
6.000rem

Usage Example

Example card with padding: 0.500rem

Generated CSS
:root {
  --spacing-0: 0rem;
  --spacing-0.5: 0.125rem;
  --spacing-1: 0.25rem;
  --spacing-1.5: 0.375rem;
  --spacing-2: 0.5rem;
  --spacing-2.5: 0.625rem;
  --spacing-3: 0.75rem;
  --spacing-3.5: 0.875rem;
  --spacing-4: 1rem;
  --spacing-5: 1.25rem;
  --spacing-6: 1.5rem;
  --spacing-8: 2rem;
  --spacing-10: 2.5rem;
  --spacing-12: 3rem;
  --spacing-16: 4rem;
  --spacing-20: 5rem;
  --spacing-24: 6rem;
}

/* Usage */
.element {
  padding: var(--spacing-4);
  margin-bottom: var(--spacing-2);
  gap: var(--spacing-3);
}

Related Tools

Flexbox Generator

Visual flexbox playground to create flexible layouts without writing code.

Grid Generator

Build complex CSS Grid layouts visually with drag and drop.

Aspect Ratio Generator

Generate aspect ratio CSS for responsive media containers.