CSS Clamp() Generator
Generate a fluid clamp() value for font-size, padding, gap and more.
Calculated locally in your browser.
- Solves the clamp() maths — the `vw` slope and `rem` intercept — so you don't have to.
- A property selector, not just font-size — the same fluid math applies to padding, margin, gap, width and more.
- One value replaces a stack of media queries.
- Calculated in your browser.
Why this is private
- Calculated locally in your browser.
- Open your browser's DevTools → Network tab while using this tool — you won't see a request carrying your input, because it never leaves your device.
- Nothing you enter is uploaded to a server or shared with us — the processing happens entirely on your device.
Overview
Generates a CSS clamp() value that scales a size fluidly between a minimum and maximum, based on viewport width — the standard technique for fluid typography and spacing without media queries. Pick font-size, line-height, padding, margin, gap, width, max-width, border-radius, or type a custom property.
How to use it
- 1Pick the property you're generating a fluid value for.
- 2Set the minimum and maximum size.
- 3Set the viewport width range they apply across.
- 4Copy the generated declaration.
Formula
clamp()
clamp(MIN, intercept + slope·vw, MAX)
Linearly interpolates between MIN at the minimum viewport and MAX at the maximum viewport, clamped outside that range.
Tips
- Set a sensible minimum so text stays legible on small screens, and cap the maximum so it doesn't get huge on very wide monitors. Prefer rem for the min/max so it respects user font-size settings.
Frequently asked questions
What people use it for
Fluid heading sizesScale an `h1` from, say, 1.75rem on mobile to 3rem on desktop with one declaration.
Responsive section padding or gapsSelect the padding, margin or gap property directly — the generated value works the same as for text.
Replace font-size media queriesCollapse three breakpoint overrides into a single fluid value.
Fluid `line-height` or icon sizingPick line-height, width or a custom property — any value that should track viewport width smoothly.
Related guides
- How to read JSON with a tree viewerA tree viewer turns a wall of brackets into a structure you can expand, search and copy paths from. Here's how to use one effectively.
- JSON parse errors explained: 'Unexpected token', 'Expected comma or brace', and the restWhat each common JSON error message actually means, the usual cause, and how to find the spot fast using line and column.
- How to format JSON (and actually understand the errors)JSON looks like a JavaScript object but follows stricter rules. Here's what those rules are and how to read the errors when they're broken.
Related tools
All developer toolsReady to use CSS Clamp() Generator?
CSS Clamp() Generator