Luke Dunsmore Labs - Logo

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 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.

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 typography and spacing without touching a calculator. Set your bounds, preview the scaling, and copy the code.

Copied to clipboard!
Live Simulator
VW: 710px Size: 1.08rem

Fluid scaling is pretty magical when you don’t have to do the maths manually.

What clamp() actually does

It mixes a minimum limit, a fluid middle that changes with the vw unit, and a maximum limit.

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, rounding to three decimals so it remains readable.

v1.6.0 – Privacy Policy – Terms of Use

This is an experimental tool. Always double-check outputs. The Developer accepts no liability and provides no warranty or accuracy guarantee.