What is a spacing scale?

A spacing scale is a set of predefined space values (for margin, padding, gap, etc.) that follow a consistent progression — either linear (4, 8, 12, 16…) or ratio-based (4, 6, 9, 13.5…). Using a scale keeps layouts visually harmonious and reduces ad-hoc spacing decisions.

What ratio should I use?

A ratio of 2 doubles each step and produces a wide scale. A ratio of 1.5 (the "perfect fifth") is popular for spacing and gives a natural progression. A ratio of 1 creates a simple linear scale. Start with 1.5 or 2 for most projects.

What base unit should I use?

Tailwind uses 4px as its base unit, which maps to 0.25rem. A 4px grid is common in UI design because it divides evenly into most screen sizes. You can also use 8px for a coarser scale or 2px for a finer one.

What are CSS custom properties (variables)?

CSS custom properties (written as --space-1, --space-2, etc.) let you define spacing values once in :root and reference them anywhere in your CSS. Changing a single variable updates all the places that use it.

How do I convert px to rem?

Divide the pixel value by the root font size, which is 16px in all major browsers by default. For example, 16px ÷ 16 = 1rem, and 4px ÷ 16 = 0.25rem. This tool does the conversion automatically.

Spacing Scale Generator

Name: Spacing Scale Generator
Availability: InStock
Author: Nham Vu

Enter a base unit and ratio to generate a modular spacing scale with px, rem, and CSS custom property output.

Base Unit (px)

Tailwind default is 4px. Common: 2, 4, 8, 10.

Ratio Multiplier

Each step = previous × ratio. 1 = linear.

Number of Steps

Steps generated starting from the base (3–20).

Root Font Size (px)

Used to compute rem values. Browser default: 16px.

Output Format

CSS custom properties (:root) Tailwind config (spacing: {}) SCSS variables ($space-*)

Scale Preview

base 4px · ratio 2 · 10 steps

Step	Token	px	rem	Visual

Code Output

Copied!

Summary

Enter a base unit and ratio to generate a modular spacing scale with px, rem, and CSS custom property output.

How it works

Set the base unit in pixels (e.g. 4px is the Tailwind default).
Choose a ratio multiplier to control how fast the scale grows.
Set how many steps to generate above and below the base.
Pick an output format: CSS custom properties, Tailwind config, or plain table.
Click Copy to grab the output and paste it into your project.

Use cases

Generate a consistent 4px-grid spacing scale for a new design system.
Create modular spacing tokens with a custom ratio for tighter or looser layouts.
Export CSS custom properties to use as spacing variables across a stylesheet.
Preview rem values alongside px to ensure accessible sizing at any font size.
Compare linear vs. ratio-based scales side by side before committing to one.
Build a Tailwind-compatible spacing config with precise pixel increments.

Frequently Asked Questions

Last updated: 2026-07-01 · Reviewed by Nham Vu