CSS Spacing Scale Calculator
Generate a consistent spacing scale for margins, padding, and gaps. Choose linear or geometric progression, preview the visual rhythm, and export as CSS variables or Tailwind config.
How the CSS Spacing Scale Calculator Works
This calculator generates a set of consistent spacing values that you can use for margins, padding, gaps, and any other spatial dimension in your CSS. Instead of picking arbitrary pixel values for each element, a spacing scale constrains your choices to a harmonious set of numbers that create visual rhythm and consistency across your entire interface.
You start by choosing a base unit (commonly 4px or 8px), a scale method (linear or geometric), and the number of steps you want. The calculator then produces a complete scale with values in pixels, rem units, and Tailwind-compatible configuration format.
Linear vs Geometric Spacing
A linear scale adds the base unit for each step. With a base of 8px, a linear scale produces 8, 16, 24, 32, 40, 48, 56, 64. The increments are constant, giving you evenly distributed options at every level. This works well when you need fine-grained control, as the difference between any two adjacent steps is always the same.
A geometric scale doubles (or multiplies by a factor) at each step. With a base of 4px, a geometric scale produces 4, 8, 16, 32, 64, 128. The gaps between steps grow exponentially, which mirrors how we perceive space: small differences matter at small sizes, but at large sizes we need bigger jumps to notice a change. This is the approach used by Tailwind CSS and many modern design systems.
Why 8px is the Standard Base Unit
The 8-point grid system is widely adopted because 8 divides evenly into common screen widths (320, 375, 768, 1024, 1440). It produces clean values when halved (4px) and doubled (16px), and it aligns well with both 4-column mobile layouts and 12-column desktop grids. Material Design, Apple Human Interface Guidelines, and Bootstrap all use multiples of 4 or 8 as their spacing foundations.
Px vs Rem for Spacing
Pixel values are absolute and predictable, making them easy to reason about during development. However, rem values scale with the user's browser font size preference, maintaining proportional relationships when accessibility settings change. Most modern design systems define spacing in rem but document the corresponding pixel values for reference. This tool outputs both formats so you can choose what fits your project.
Integrating with Tailwind CSS
The Tailwind config output maps each spacing step to a numeric key you can use directly with utility classes like p-1, m-2, gap-3. Drop the generated object into your tailwind.config.js under theme.extend.spacing to override or extend the default scale. This gives you complete control over spatial rhythm while keeping the utility-first workflow.
Privacy
All calculations run entirely in your browser. No data is transmitted to any server. The tool works fully offline once loaded.