liminfoUI Spacing Calculator
Free web tool: UI Spacing Calculator
CSS Custom Properties
:root {
--space-0: 0px;
--space-0_5: 2px;
--space-1: 4px;
--space-1_5: 6px;
--space-2: 8px;
--space-2_5: 10px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--space-10: 40px;
--space-12: 48px;
--space-16: 64px;
--space-20: 80px;
--space-24: 96px;
}Tailwind Config
spacing: {
'0': '0rem', // 0px
'0.5': '0.125rem', // 2px
'1': '0.25rem', // 4px
'1.5': '0.375rem', // 6px
'2': '0.5rem', // 8px
'2.5': '0.625rem', // 10px
'3': '0.75rem', // 12px
'4': '1rem', // 16px
'5': '1.25rem', // 20px
'6': '1.5rem', // 24px
'8': '2rem', // 32px
'10': '2.5rem', // 40px
'12': '3rem', // 48px
'16': '4rem', // 64px
'20': '5rem', // 80px
'24': '6rem', // 96px
}About UI Spacing Calculator
The UI Spacing Calculator generates a complete, proportional spacing scale from a single base unit value. Starting from a base of 4px (the default used by Tailwind CSS), it computes 16 spacing steps — 0, 0.5, 1, 1.5, 2, 2.5, 3, 4, 5, 6, 8, 10, 12, 16, 20, and 24 multiples — and displays each step's pixel value, rem equivalent, and a visual bar proportional to its size. This lets you immediately see how your spacing system scales.
Frontend developers and UI/UX designers use this tool when building design systems or customizing component libraries. A consistent spacing scale is fundamental to visual hierarchy — elements sized by multiples of a single base unit maintain mathematical harmony throughout an interface. By changing the base unit, you can instantly preview how a 6px or 8px grid would look compared to the default 4px grid, helping you choose the right foundation before committing to a design system.
The tool outputs two ready-to-paste code snippets: a CSS `:root` block defining all spacing steps as custom properties (e.g. `--space-4: 16px`), and a Tailwind CSS `spacing` config object with rem values and pixel annotations as comments. Both can be copied with a single click. All computation runs entirely in your browser — no server is involved, and no data is stored.
Key Features
- Generates 16 spacing steps (0 through 24 multiples) from a single configurable base unit
- Displays each step's pixel value, rem equivalent, and a proportional visual bar
- Outputs complete CSS custom properties block (`:root { --space-N: Npx; }`) ready to paste
- Outputs Tailwind CSS `spacing` config object with rem values and px annotations as comments
- One-click copy for both CSS variables and Tailwind config snippets
- Live update — changing the base unit instantly recalculates all 16 steps
- 100% client-side calculation with no server calls or data storage
- Dark mode support with syntax-highlighted code blocks
Frequently Asked Questions
What is a spacing scale and why does it matter?
A spacing scale is a set of predetermined size values used consistently for margins, paddings, gaps, and layout dimensions throughout a UI. Using multiples of a single base unit ensures that all spacing relationships are mathematically consistent, which produces interfaces that feel visually harmonious and are easier to maintain.
Why is 4px the default base unit?
Four pixels is a widely adopted base unit because it divides evenly into common screen densities and aligns with Tailwind CSS's default spacing system. It produces comfortable increments (4, 8, 12, 16, 24, 32px) that map well to standard component sizes. Tailwind's `spacing-1` equals 4px, `spacing-4` equals 16px, and so on.
How do I use the CSS custom properties output?
Copy the CSS block and paste it into your global stylesheet or a `:root` selector in your CSS file. You can then reference spacing values throughout your CSS with `var(--space-4)` for 16px (at base 4px), `var(--space-8)` for 32px, and so on. This approach works with any CSS framework or plain CSS.
How do I use the Tailwind config output?
Copy the spacing object and paste it into the `theme.spacing` or `theme.extend.spacing` key in your `tailwind.config.js` file. This overrides or extends Tailwind's default spacing scale with your custom base unit, making all Tailwind spacing utilities (p-4, m-6, gap-8, etc.) reflect your design system.
What is the difference between px and rem values?
Pixels (px) are absolute units tied to screen pixels — 16px is always 16 physical pixels regardless of user settings. Rem units are relative to the root font size, which defaults to 16px in most browsers. Using rem for spacing respects user browser font size preferences, improving accessibility for users who have increased their default font size.
Can I use a fractional base unit like 3.5px?
Yes. The base unit input accepts decimal values. Entering 3.5 produces a scale based on 3.5px, so spacing step 4 would be 14px. This is useful if your design requires a tighter grid than 4px or if you are matching an existing design system with a non-standard base.
How many spacing steps does this tool generate?
The tool generates 16 steps using the multipliers: 0, 0.5, 1, 1.5, 2, 2.5, 3, 4, 5, 6, 8, 10, 12, 16, 20, and 24. These multipliers match Tailwind CSS's default scale, so the output is directly compatible with Tailwind's naming conventions.
Is this tool useful for non-Tailwind projects?
Yes. The CSS custom properties output works with any CSS setup including vanilla CSS, SCSS, CSS Modules, Styled Components, and Emotion. You can use the generated CSS variables anywhere you write CSS, making this tool valuable for any design system regardless of framework.