CSS Clamp Generator

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).
Luke Dunsmore Labs - Logo 250 x 125px

CSS Clamp Generator

JSON to TypeScript & Tables

Open-Source ‘Which License’ Wizard

HTML/CSS/JS Renderer

All tools at Luke Dunsmore Labs are offered ‘as-is’, and without commitment from the developer.

Be sure to read the Terms of Use and
Terms and Conditions.

🍪 Fancy a Cookie?

This website uses cookies to ensure you get the best experience. Learn More
No Thanks
Accept