CSS clamp() generator
Generate a fluid CSS clamp() size (responsive typography) between two screen widths.
- Instant
- Free
- Private (processed locally)
- No sign-up
A size that follows the screen
Enter the min and max size and the matching screen widths: the tool computes the clamp() value to paste into your CSS, with a preview that reacts to the window width.
-
Min / max size
E.g. 16px to 24px.
-
Reference screens
E.g. 320px to 1280px.
-
Copy the clamp()
Into font-size, padding, etc.
Example: 16 → 24px (320 → 1280px)
| Item | Value |
|---|---|
| Min / max size | 16px / 24px = 1rem / 1.5rem |
| Screens | 320px → 1280px |
| Fluid slope | 0.833vw |
| Result | clamp(1rem, 0.833rem + 0.833vw, 1.5rem) |
At 320px the size is 16px, at 1280px it is 24px, and it varies linearly in between. 100% local calculation.
Frequently asked questions
What is clamp() for?
The CSS clamp(min, preferred, max) function bounds a value between a minimum and a maximum, with a preferred value that adapts to the screen width. It is the modern way to make fluid font sizes without media queries.
How is the preferred value computed?
We draw a straight line between (min width, min size) and (max width, max size). The middle part combines a fixed rem base and a vw slope, e.g. 0.833rem + 0.833vw, bounded by the min/max in rem.
Why mix rem and vw?
vw makes the size grow with the viewport width (fluidity); rem adds a fixed base so the slope does not start from zero. The combination gives a linear, readable growth that respects user zoom.
Do I need to keep min and max?
Yes. Without bounds the text would become tiny on small screens and huge on very large ones. clamp() locks the value outside your reference width range.