Luke Dunsmore Labs - Logo 250 x 125px

CSS Clamp Generator

Fluid type should feel like magic, not maths homework.

This little lab gadget takes the mystery out of clamp() and turns it into something you can actually use without opening a spreadsheet. Set your min/max viewport widths, dial in the smallest and largest sizes you want, and it builds a perfectly smooth fluid value that scales exactly how you expect — no guesswork, no breakpoints, no “I’ll sort this later.”

You get a live preview, clean copy-and-paste CSS, and optional presets for headings, body text, and spacing.

CSS Clamp Playground

DIAL IN FLUID TYPE WITHOUT TOUCHING A CALCULATOR.

Set your min/max viewport widths and sizes, and this will spit out a ready-to-paste clamp() rule with a live preview.

Presets:
Copied!
Resize between 320px and 1100px. Live preview: font-size
Fluid type is pretty magical when you don’t have to do the maths.
Tip: set your max width to your real container size (e.g. 1200px).
What clamp() actually does

It mixes a min, a fluid middle that changes with vw, and a max. Between your viewport range, the fluid bit is active; outside it just snaps to the min or max value.

clamp( min , fluid( vw ) , max )
How this tool calculates it

We linearly interpolate between your min/max sizes over the viewport range, then turn that into slope vw + intercept rem with three-decimal rounding so it’s readable but precise.

v1.0.0 – Privacy Policy – Terms of Use

This is an experimental tool. Always double-check outputs. This tool is not a legal tool, or a substitute
for legal advice. The Developer accepts no liability and provides no warranty or accuracy guarantee.