Stop guessing padding values.
Generate a consistent spacing scale, linear or geometric, so every margin and gap comes from the same system.
The spacing scale is calculated in the browser. Nothing is uploaded.
What it does
About the Spacing/Sizing Scale Calculator.
A spacing scale calculator generates a ladder of spacing values from a base unit so padding, margin, and gap come from one system instead of one-off pixels.
Teams often standardize on 4px or 8px. Linear scales add the base each step. Geometric scales multiply. Either way, you get named steps you can drop into tokens or Tailwind-style spacing maps.
How to use
Three steps.
Set
Set a base unit (for example 4 or 8) and choose linear or geometric growth.
Read
Review the generated steps and how they would feel as padding or gap.
Copy
Copy the values into design tokens or CSS custom properties.
When to use it
Where it helps.
Use it when a SaaS UI has 7px here and 11px there. A shared scale speeds reviews and keeps denser Fintech layouts from drifting. Keep a couple of exception values if you must, and document them.
FAQ
FAQ.
What is an 8-point spacing grid?
It is a convention where most spacing is a multiple of 8 (or 4 on compact screens). It is a starting system, not a law. This tool can generate that ladder from your base unit.
Should I use a linear or geometric scale?
Linear is predictable for UI padding. Geometric jumps faster and can suit large marketing sections. Pick the one that matches how many distinct steps you actually use.
How do I copy the scale into CSS?
Copy the pixel or rem steps and map them to tokens such as --space-1 through --space-8, or to your theme.spacing object.
Is the scale computed on a server?
No. It is generated in your browser. Nothing is uploaded.
More tools
layout
Aspect Ratio Calculator
Solve for width, height, or CSS aspect-ratio from any two values.
layout
CSS Grid Generator
Set columns, rows, and gap, then copy production CSS Grid.
layout
Flexbox Playground
Tune flex-direction, wrap, justify-content, align-items, and gap on a live playground.