CSS Clamp Generator

Create a min, viewport-based preferred and max CSS clamp() expression.

Clamp settings

clamp() is useful for responsive font sizes and spacing. Test the result across your actual viewport range.

Clamp result

Responsive preview text

About the CSS Clamp Generator

Create a bounded fluid CSS value that grows with viewport width but never falls below the minimum or exceeds the maximum.

How to use it

  1. Enter the minimum and maximum size in px or rem.
  2. Enter the preferred viewport-based value in vw.
  3. Preview and copy the clamp expression into a font-size, gap or spacing property.

How clamp works

CSS clamp(minimum, preferred, maximum) selects the preferred value while keeping it inside the stated bounds.

Example

clamp(1rem, 2.5vw, 2rem) can scale text between 1rem and 2rem as the viewport changes.

Notes

A single vw expression may not match every design system. Check your final design in your own browser.