Spacing Scale Generator
Build a consistent spacing scale for design systems — enter a base unit and multiplier to generate a full set of spacing tokens in px and rem, ready for Tailwind or CSS variables.
- 00px
- 14px
- 28px
- 312px
- 416px
- 520px
- 624px
- 728px
- 832px
- 936px
- 1040px
- 1144px
How to use the spacing scale generator
Pick a base unit (commonly 4 or 8 px) and how many steps you want. The scale is step × base.
Formula & explanation
Linear progression. Tailwind uses base 4 (rem * 0.25); Material Design uses base 8.
Examples
Base 4, 12 steps → 0, 4, 8, 12, 16, 20, 24, 28, 32, 36, 40, 44 px.
Frequently asked questions
- Why is 4px the most common spacing base?
- 4px divides evenly into the standard 16px root font size and aligns with most device pixel densities, making it easy to maintain visual rhythm across text and layout.
- What spacing base does Tailwind CSS use?
- Tailwind uses a 4px (0.25rem) base — its spacing-1 = 4px, spacing-2 = 8px, and so on — making a base-4 scale directly compatible.
- When should I use an 8px base instead of 4px?
- An 8px base is common in Material Design and works well for component-level spacing (padding, gaps) where you rarely need sub-8px values.
- How many spacing steps do I need?
- Most design systems work well with 10–16 steps. Fewer steps force creative reuse; more steps risk inconsistent usage. Tailwind ships 96 steps but most projects use only a dozen or so.
Related design & css tools
- Type Scale GeneratorGenerate a modular type scale from a base font size and ratio (Major Third, Perfect Fourth, Golden Ratio, and more). Outputs CSS custom properties for a consistent typographic system.
- CSS Gradient GeneratorBuild linear and radial CSS gradients visually with a live preview and copy-ready CSS output. Control colors, stops, angle, and shape — no code required.
- Box Shadow GeneratorCompose CSS box-shadow visually — adjust X/Y offset, blur, spread, and color with a live preview. Copy the final CSS rule with one click. Supports multiple shadow layers.
- Border Radius GeneratorBuild CSS border-radius values visually — symmetric, asymmetric, or fully custom per-corner shapes. Live preview with copy-ready CSS output for any border-radius combination.
- Image Color PaletteExtract a dominant color palette from any uploaded image. Shows the top colors with HEX values — useful for brand identity, design matching, and color inspiration.
- WCAG Contrast CheckerCheck foreground/background color contrast ratios against WCAG 2.1 AA (4.5:1) and AAA (7:1) standards. Enter HEX or RGB values — see pass/fail for normal and large text.