What is CSS clamp() and why use it?

CSS clamp(min, preferred, max) constrains a value between a minimum and maximum while letting it scale fluidly in between. It eliminates the need for separate media-query breakpoints for typography and spacing.

How is the preferred (middle) value calculated?

The generator uses linear interpolation: slope m = (maxValue − minValue) / (maxViewport − minViewport), intercept b = minValue − m × minViewport. The preferred value is b + m × 100vw, which produces exactly minValue at the minimum viewport and maxValue at the maximum viewport.

What unit should I use for the output — vw, vh, or cqi?

Use vw for standard viewport-width-based scaling (the most common case). Use vh when scaling relative to viewport height. Use cqi for container-query-aware fluid values inside a containment context.

Can I mix input units, for example px min and rem max?

Yes. The generator normalizes all inputs to pixels internally (assuming 1 rem = 16 px) before computing the slope and intercept, then converts the output back to your preferred unit.

CSS Clamp Generator

Name: CSS Clamp Generator
Availability: InStock
Author: Nham Vu

Enter min/max values and viewport widths, then get a ready-to-paste CSS clamp() expression with a live viewport simulator to preview the scaling.

Clamp Parameters

Presets

Minimum value

Maximum value

Min viewport (px)

Max viewport (px)

Preferred fluid unit

Output unit

Generated Output

Fill in the parameters above and click Generate clamp().

Viewport Simulator

800 px

320 1920

800 px wide

The quick brown fox jumps over the lazy dog

font-size: —

minmax

Summary

Enter min/max values and viewport widths, then get a ready-to-paste CSS clamp() expression with a live viewport simulator to preview the scaling.

How it works

Enter the minimum value and unit (px, rem, or em) for the smallest viewport.
Enter the maximum value and unit for the largest viewport.
Set the minimum and maximum viewport widths in pixels.
Choose your preferred fluid unit (vw, vh, or cqi) for the middle value.
Click Generate to get the clamp() expression, then copy it or use the Tailwind class.
Drag the Viewport Simulator slider to preview how the value scales across screen sizes.

Use cases

Set fluid heading sizes that scale smoothly between mobile and desktop without media queries.
Generate responsive padding or margin values for section containers.
Create fluid line-height or letter-spacing that adapts to viewport width.

Frequently Asked Questions

Last updated: 2026-06-09 · Reviewed by Nham Vu