CSS Clamp Generator

Generate a responsive CSS clamp() for fluid font sizes and spacing.

font-size: clamp(1.0000rem, 0.8333rem + 0.8333vw, 1.5000rem);

Related Tools

🌫️
CSS Box Shadow Generator
Visually build a CSS box-shadow and copy the code.
 🎨
CSS Gradient Generator
Build linear and radial CSS gradients visually and copy the code.
 📐
Aspect Ratio Calculator
Calculate width or height to keep an aspect ratio, or simplify a ratio.

0 comments

How it works

Enter a minimum and maximum size and the viewport width range over which the value should scale. The tool computes the linear preferred value — a combination of a rem base and a vw slope — and wraps it in a CSS clamp() so the size grows smoothly between your bounds and never goes below the minimum or above the maximum. This creates fluid typography and spacing without media-query breakpoints. All math runs locally in your browser.


              clamp(min, calc(base + slope·vw), max)

Common use cases

  • Making a heading scale smoothly from mobile to desktop.
  • Creating fluid spacing that grows with the viewport.
  • Replacing several font-size media queries with one clamp().

Frequently asked questions

What does clamp() do?

clamp(min, preferred, max) returns the preferred value but never lets it fall below min or rise above max. With a viewport-based preferred value, the size scales fluidly between your two breakpoints.

What units should I use?

Sizes are typically in rem or px and the viewport range in px. The generator outputs rem and vw for the preferred term, which scales with both viewport and user font settings.

Is clamp() widely supported?

Yes. CSS clamp() is supported in all current major browsers, so it is safe for production fluid typography.