What does the CSS clamp() function do?

clamp(MIN, PREFERRED, MAX) returns the PREFERRED value but never lets it drop below MIN or rise above MAX. For responsive design the preferred term is a vw-based expression, so the value grows smoothly with the viewport and then locks at the bounds.

Why use rem plus vw instead of just vw?

A pure vw value keeps scaling forever and ignores the user's browser zoom and root font size. Mixing a rem intercept with a vw slope respects zoom and accessibility settings while still being fluid, which is why this generator always outputs rem + vw.

How is the preferred term calculated?

The tool draws a straight line between your two anchor points — (min viewport, min value) and (max viewport, max value) — and expresses it as slope times 100vw plus a rem intercept. That is the standard linear-interpolation formula behind fluid typography.

What viewport range should I pick?

A common choice is 320px for the smallest phones and 1280px or 1440px for large desktops. The value stays at your minimum below the lower bound and at your maximum above the upper bound, so pick the range where you actually want fluid scaling.

Can I use this for spacing and not just font size?

Yes. clamp() works on any length property — margin, padding, gap, width, border-radius and more. Rename the rows to match your spacing scale and reuse the generated custom properties anywhere a length is valid.

Is my data sent anywhere?

No. Every calculation runs locally in your browser and your rows are saved only in this browser via localStorage. Nothing is uploaded.

CSS clamp() Generator

A CSS clamp() generator that converts a minimum size, a maximum size, and a viewport range into a single responsive clamp() value you can paste straight into your stylesheet. It is built for front-end developers and designers who want fluid typography or fluid spacing that scales smoothly between a phone and a wide desktop without writing a stack of media queries. You can define a whole type scale or spacing scale at once, watch every step respond as you drag a simulated viewport slider, and export the result as ready-to-use CSS custom properties.

How it works

Each row describes one fluid value with two anchor points: the size you want at your smallest viewport and the size you want at your largest viewport. The generator draws a straight line between those two points and expresses it as a vw slope plus a rem intercept — the preferred term inside clamp(). The minimum and maximum become the outer bounds, so the value scales linearly in the middle and then locks at each end. Because the output mixes rem with vw, it respects the user’s browser zoom and root font size, which a pure vw value would ignore. You set the root font size (usually 16px), the min and max viewport widths, and whether you type values in rem or px; switching units re-converts your existing rows automatically so nothing is lost.

Example

Say you want body text at 1rem on a 320px phone growing to 1.125rem on a 1280px desktop. The tool returns something like clamp(1rem, 0.85rem + 0.42vw, 1.125rem). Below 320px the text stays at 1rem, above 1280px it stays at 1.125rem, and in between it scales perfectly straight. Drag the preview slider and you will see the resolved pixel size update live for every row at once — a quick way to sanity-check a full scale before shipping it.

Min size	Max size	Viewport range	Example output
1rem	1.125rem	320 to 1280px	`clamp(1rem, 0.85rem + 0.42vw, 1.125rem)`
1.25rem	1.6rem	320 to 1280px	`clamp(1.25rem, 1.1rem + 1.1vw, 1.6rem)`
1.95rem	3.16rem	320 to 1280px	`clamp(1.95rem, 1.55rem + 3.8vw, 3.16rem)`

Everything is calculated in your browser — no values are uploaded or stored on a server, and your scale is remembered locally for next time.