CSS Clamp Generator
Build fluid clamp() values instantly and preview them at any screen width.
Size range
Preview by screen width
Drag the slider to see the real size at each screen width.
Build a whole type scale
Set heading and body sizes to get CSS variables for the range above.
| Name | Min px | Max px |
|---|---|---|
CSS Clamp Generator: Fluid Typography Done Right
The CSS Clamp generator is the best way to build responsive fonts and layouts that scale smoothly without media queries. It produces optimal responsive code in real time — no manual math required.
1. What is the CSS clamp() function?
clamp() is a modern CSS function that constrains a value with three parameters: minimum, preferred, and maximum. The element's size follows the preferred value as the screen scales, but never drops below the minimum or exceeds the maximum.
2. Why use clamp()?
- Seamless scaling: media queries make sizes jump at breakpoints; clamp() scales linearly and smoothly with the viewport.
- Less maintenance: one line of code replaces a stack of media query blocks.
- Guaranteed readability: text never becomes too large on mobile or too small on desktop.
3. How the calculation works
This generator uses linear interpolation to compute the ideal preferred value. You only enter the min/max font size and the min/max viewport width — the generated calc() expression lets the browser work out the exact pixel value for any screen size.
4. Practical tips
Don't stop at font sizes — clamp() works great for padding, margin, and width too. Applying it to hero titles and content gutters keeps your designer's intended proportions intact on every resolution.
Frequently Asked Questions
Q. How does the CSS clamp() function work?
clamp(minimum, preferred, maximum) lets the preferred value scale with the viewport while never going below the minimum or above the maximum.
Q. Should I use clamp() or media queries?
Use clamp() for values that should change continuously, like font sizes and spacing. Use media queries when the layout structure itself changes. Most projects use both together.
Q. How well is clamp() supported in browsers?
clamp() is supported in every major browser released since 2020 (Chrome 79+, Safari 13.1+, Firefox 75+, Edge 79+), covering well over 95% of users worldwide.
Q. How is the vw value in the preferred parameter calculated?
By linear interpolation between your four inputs: min/max font size and min/max viewport width. The generator solves the equation and outputs a ready-to-copy clamp() rule.