Category: Developer tools
Fluid Spacing Scale Generator
Build a set of clamp()-based spacing tokens
Give a base spacing size at a narrow and a wide viewport plus a scale ratio, and get a full set of --space-* custom properties, each its own clamp() that scales smoothly between the two, ready to paste into :root.
| Token | Output |
|---|---|
| --space-3xs | clamp(0.0988rem, 0.0601rem + 0.1718vw, 0.1975rem) |
| --space-2xs | clamp(0.1481rem, 0.0902rem + 0.2576vw, 0.2963rem) |
| --space-xs | clamp(0.2222rem, 0.1353rem + 0.3865vw, 0.4444rem) |
| --space-sm | clamp(0.3333rem, 0.2029rem + 0.5797vw, 0.6667rem) |
| --space-md | clamp(0.5rem, 0.3043rem + 0.8696vw, 1rem) |
| --space-lg | clamp(0.75rem, 0.4565rem + 1.3043vw, 1.5rem) |
| --space-xl | clamp(1.125rem, 0.6848rem + 1.9565vw, 2.25rem) |
| --space-2xl | clamp(1.6875rem, 1.0272rem + 2.9348vw, 3.375rem) |
| --space-3xl | clamp(2.5313rem, 1.5408rem + 4.4022vw, 5.0625rem) |
:root {
--space-3xs: clamp(0.0988rem, 0.0601rem + 0.1718vw, 0.1975rem);
--space-2xs: clamp(0.1481rem, 0.0902rem + 0.2576vw, 0.2963rem);
--space-xs: clamp(0.2222rem, 0.1353rem + 0.3865vw, 0.4444rem);
--space-sm: clamp(0.3333rem, 0.2029rem + 0.5797vw, 0.6667rem);
--space-md: clamp(0.5rem, 0.3043rem + 0.8696vw, 1rem);
--space-lg: clamp(0.75rem, 0.4565rem + 1.3043vw, 1.5rem);
--space-xl: clamp(1.125rem, 0.6848rem + 1.9565vw, 2.25rem);
--space-2xl: clamp(1.6875rem, 1.0272rem + 2.9348vw, 3.375rem);
--space-3xl: clamp(2.5313rem, 1.5408rem + 4.4022vw, 5.0625rem);
}Each token is its own clamp(), so every step scales smoothly between the two viewport widths.
Everything on this page is processed in your browser. Nothing is uploaded.
What this tool does
A single fluid clamp() is useful for one value, but most layouts need a whole scale of consistent spacing steps, and hand-writing a clamp() for each one multiplies the same arithmetic mistakes across every token. This tool takes one base size at each end of your viewport range and a ratio, then generates a symmetric scale of tokens around a middle step the same way a type scale is built, so the whole set stays proportionally consistent as the viewport changes.
How to use it
- Set the base spacing size at your narrow and wide viewport widths.
- Set the scale ratio between steps.
- Copy the generated :root block of --space-* custom properties.
Privacy
This tool runs entirely in your browser. Your input is never uploaded, stored or shared — closing the tab removes it.
Frequently asked questions
- Why nine steps?
- Nine gives four steps below and above a middle value, which covers most layouts from tight inline gaps to large section spacing without needing to invent extra names later.
- Is anything sent to a server?
- No. Every clamp() is calculated in the page from the numbers you type, which is why the table and CSS output update instantly.
- Can I use these with the CSS Clamp Generator too?
- Yes. This tool builds a whole scale from one set of inputs; the CSS Clamp Generator is for a single one-off value like a heading size, using the same underlying maths.