~/css/spacing-scale-generator
CSS Spacing Scale Generator
Create a spacing system instead of picking margins at random. Choose a base size, a linear or modular ratio and the number of steps, preview the scale as bars, and copy it as CSS custom properties in pixels or rem.
Using the CSS Spacing Scale Generator
Why use a spacing scale
When every margin and padding comes from a short list of values, layouts look consistent and designers and developers stop debating whether a gap should be 13 or 15 pixels. A scale also makes responsive changes easy: adjust the base and everything follows.
Linear or modular
A linear scale uses multiples of the base, such as 4, 8, 12, 16 and so on, which suits interface components that need fine steps. A modular scale multiplies by a ratio each step, so small values stay close together and large ones grow quickly, which suits page-level spacing between sections.
Pixels or rem
rem values are relative to the root font size, so spacing grows if someone increases their browser's default text size. That keeps layouts proportional for people who need larger text. The generator assumes the usual 16px root.
Using the tokens
Reference the variables everywhere, for example padding: var(--space-4) and gap: var(--space-3). If a value you want is not in the scale, it is usually a sign the design needs adjusting rather than a new number.
Frequently asked questions
Which base should I pick?
4px is the most common base for interfaces; 8px gives a coarser, simpler scale.
Does this work with Tailwind?
Tailwind's default spacing is a linear 4px scale. Copy your values into the spacing section of the config if you want to change it.
Can I mix scales?
Keep one scale for components. Some teams add a second, larger modular scale for section spacing.