Spacing Calculator

Build a consistent spacing scale from any base unit. Click any token to copy its value, then export as CSS, Tailwind, or SCSS.

Settings

Live preview — hover a token below ↓

— Hover a token to preview
Padding
Content
Gap
A
B
C
Stack
Block A
Block B

Page preview

htmltools.cc — Spacing Preview
HomeAboutDocs
--space-?
Design Tokens
Space with intent
--space-?
Cards — gap
A
B
C
--space-?
List — gap
First item
Second item
Third item
--space-?
--space-?

Scale — hover to preview ↑, click to copy

Export tokens