CSS clamp() Generator
Make font sizes and spacing scale smoothly between two screen widths — no media queries. Enter your minimum and maximum, and get an accurate clamp() with a live preview and breakpoint table.
Property
Size range
Viewport range
Output
Preview width
| Screen width | Value |
|---|
What Does CSS clamp() Do?
It keeps a value between a minimum and a maximum while letting it scale fluidly in between.
clamp(MIN, PREFERRED, MAX) returns the preferred value, but never less than MIN or more than MAX. When the preferred value uses viewport units (vw), the result grows smoothly with the screen width and stops at your limits — fluid typography without a single media query.
The tricky part is the middle value. To hit exactly your minimum at one screen width and your maximum at another, you need a straight line: a slope (how much the value grows per pixel of screen) and an intercept. This generator does that maths for you and writes it as rem + vw.
Using rem for the fixed part matters for accessibility. Pure vw values ignore the user's browser font-size setting and barely change when zooming. Mixing rem and vw means text still responds to user preferences.
Even so, fluid text grows less than normal text when zoomed. WCAG 1.4.4 requires text to reach 200% on zoom; a common rule of thumb is to keep the maximum within about 2.5× the minimum. The tool warns you when you go beyond that.
How the clamp() Value Is Calculated
Every number in the output, explained.
Slope
(max size − min size) ÷ (max width − min width). How many pixels the value grows for each pixel of screen width.
vw part = slope × 100
1vw is 1% of the viewport width, so the slope is multiplied by 100 to express it in vw.
Intercept
min size − slope × min width, converted to rem by dividing by the root font size (usually 16px).
Order of the limits
clamp() always takes the smaller limit first. If your value shrinks as the screen grows, the tool swaps them for you.
Root font size
rem values are relative to the html font size. If you changed it (e.g. to 62.5% = 10px), enter that here so the numbers match.
Browser support
clamp() works in every modern browser since 2020 — no fallback needed.
How to Use the CSS clamp() Generator
Get your result in under ten seconds.
Set the sizes
Choose the property, then the smallest and largest value you want (in px or rem).
Set the screen widths
Pick the screen width where scaling starts and where it stops. Drag the preview width to check every size in between.
Copy
Press Copy CSS for the full declaration, or Copy value for just the clamp().
Why Use the CSS clamp() Generator on Developers Web Tools
Fast, accurate and private — built for developers.
Accurate maths
Exact slope and intercept, rounded to 4 decimals — your min and max are hit precisely.
Accessibility checks
rem-based output and a warning when the size range may fail WCAG zoom requirements.
Live viewport preview
Simulate any screen width and see the real computed size, plus a table of common breakpoints.
Grows or shrinks
Works for values that get smaller on bigger screens too — the limits are ordered for you.
Not just fonts
Use it for padding, margin, gap, widths and border-radius.
Private
Everything runs in your browser.
Frequently Asked Questions
Text that scales smoothly with the screen width instead of jumping between fixed sizes at breakpoints. clamp() makes it possible with one line of CSS and keeps the size within your limits.
The vw part makes the value scale with the screen; the rem part keeps it tied to the user's font-size setting so it respects browser preferences and zoom better than pure vw.
It can be. Use rem in the formula (this tool does), and keep the maximum within about 2.5× the minimum so text can still be zoomed to 200% (WCAG 1.4.4). The tool warns you if your range is larger.
A common choice is from about 360–375px (phones) to 1200–1440px (desktop layouts). Below and above that range, the value stays at your minimum and maximum.
Yes. Enter a larger minimum than maximum — the slope becomes negative and the generator orders the clamp() limits correctly.
The preview simulates the viewport width you choose with the slider. On your page, vw uses the real browser width (including the scrollbar in most browsers).
No — clamp() has been supported by all major browsers since 2020. If you must support something older, put a plain value on the line before.