ZeroServer.tools

Spacing Scale Generator

Generate a consistent spacing scale for your design system in seconds.

Base Unit

Name	Multiplier	px	rem
3xs	0.5×	2px	0.125rem
2xs	1×	4px	0.25rem
xs	2×	8px	0.5rem
sm	3×	12px	0.75rem
md	4×	16px	1rem
lg	5×	20px	1.25rem
xl	6×	24px	1.5rem
2xl	8×	32px	2rem
3xl	10×	40px	2.5rem
4xl	12×	48px	3rem
5xl	16×	64px	4rem
6xl	20×	80px	5rem

--spacing-3xs: 0.125rem;
--spacing-2xs: 0.25rem;
--spacing-xs: 0.5rem;
--spacing-sm: 0.75rem;
--spacing-md: 1rem;
--spacing-lg: 1.25rem;
--spacing-xl: 1.5rem;
--spacing-2xl: 2rem;
--spacing-3xl: 2.5rem;
--spacing-4xl: 3rem;
--spacing-5xl: 4rem;
--spacing-6xl: 5rem;

About Spacing Scale Generator

A consistent spacing scale is the foundation of any design system. This tool generates tokens from a single base unit — the most common is 4px, which aligns with Material Design, Tailwind, and most UI frameworks. Each step multiplies the base by a fixed factor so the scale is perfectly proportional. Export the result as CSS custom properties (--spacing-md), Tailwind CSS spacing config, or SCSS variables and paste them straight into your project. Using a shared scale eliminates arbitrary magic numbers and makes spacing decisions instantly consistent across components and breakpoints.

Private & free — this tool runs entirely in your browser.