CSS Clamp() Generator
Design ToolsFluid responsive font sizes with clamp()
Similar tools you may like
History
All history →CSS Clamp() Generator — at a glance
Make text and spacing scale smoothly between phone and desktop without media queries.
How to use it — step by step
Smallest and largest size, and the screen widths where they should start and stop.
Enter your values
Fill in the boxes. Sensible example values are already filled in for you.
Generate clamp()
Press the button. The answer is worked out instantly on your device.
Read or copy the result
See the big answer and the extra details, then press Copy to keep them.
Pro tips
Small things that make the result better.
Quick facts
Frequently Asked Questions
What does clamp() do?+
clamp(min, preferred, max) keeps a value between a minimum and maximum while it changes with the screen width.
Why rem and vw together?+
The rem part is the starting size; the vw part makes it grow as the screen gets wider.
Is my data safe?+
Yes. Everything runs inside your own browser. Your text, files and images are never uploaded to any server.