CSS Clamp Generator

Give a size for small screens, a size for large screens and the screen widths where each should apply, and get one clamp() line that grows smoothly between them. Use it for headings, body text, padding and gaps so a design scales with the screen without a stack of media queries.

What you enter

  • CSS property
  • Minimum size
  • Maximum size
  • Screen width for minimum size
  • Screen width for maximum size
  • Root font size

What you get

  • Growth per 100px of screen
  • Fixed part

How it works

  1. Enter the smallest size you want, in pixels, and the screen width where it should apply (often 320 or 375 pixels for phones).
  2. Enter the largest size and the screen width where it should stop growing (often 1200 to 1440 pixels).
  3. The tool works out the straight line between those two points and writes it as rem plus vw inside clamp().
  4. Copy the CSS line into your stylesheet. Change the property name if you are sizing padding, margin or gap instead of text.

Why fluid sizes need two anchor points

A fluid size is a straight line drawn between two points: the size you want at a small screen width and the size you want at a large one. clamp() then stops the line from running past either end. Choosing those two points well matters more than the exact numbers: pick the narrowest phone width you design for and the width where your content column stops getting wider.

If the large anchor is set far wider than your content column, the text keeps growing on big monitors after the layout has stopped widening, and headings start to look oversized next to a fixed-width column. Matching the large anchor to your container width avoids that.

Accessibility and zoom

Browsers let visitors raise their default font size, and many people with low vision rely on it. A size written only in vw units ignores that setting entirely. The rem part of the middle value is what keeps a fluid size responsive to the visitor's choice, which is why this tool always writes the fixed part in rem.

Check the result by zooming the page to 200 percent. Text written with clamp() should still grow. If a heading barely changes, the vw share is too large compared with the rem share; narrow the difference between your minimum and maximum sizes and test again.

Tips

  • Keep a rem part in the middle value. A size made only of vw ignores the visitor's browser font setting, so zooming text stops working; mixing rem and vw keeps zoom working.
  • Do not let body text drop below 16 pixels on phones. Fluid sizing is most useful for headings, where the gap between phone and desktop sizes is large.
  • Use the same two screen widths for every clamp() on a site. Sizes then all start and stop growing together, which keeps the proportions of the design steady.
  • If your site changes the root font size from 16 pixels, set the root size box to match, or every rem value will be off by the same ratio.

Frequently asked questions

How does CSS clamp() work?

clamp(MIN, PREFERRED, MAX) uses the preferred value but never goes below MIN or above MAX. With clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem), text is 16 pixels on narrow screens, 24 pixels on wide ones, and grows in a straight line in between.

What is the formula behind the middle value?

The slope is (max size minus min size) divided by (max width minus min width). The vw part is the slope times 100. The fixed part is min size minus slope times min width, then divided by the root font size to turn it into rem. For 16 to 24 pixels between 320 and 1280 pixel screens: slope = 8 / 960 = 0.008333, so 0.8333vw; fixed part = 16 minus 2.6667 = 13.3333 pixels, which is 0.8333rem.

Is clamp() supported in all browsers?

Yes. Every current version of Chrome, Edge, Firefox and Safari supports clamp(). Only browsers that are several years out of date ignore it, and they fall back to whatever size you set earlier in the CSS.

Can I make something shrink as the screen gets wider?

Yes. Enter a larger size for the small screen than for the large one. The slope becomes negative and the tool still puts the smaller size first in clamp(), as the function requires.

Should I use clamp() for spacing too?

It works well for section padding and grid gaps, which often look too large on phones and too tight on wide screens. Use the same screen widths you used for type so spacing and text scale together.

Related: PX to REM converter, Type scale generator, CSS minifier.

Start for free or see all free tools. We.Inc is free to start, with no card needed. AI building is on paid plans from $20 a month.

More in Free Tools

Product

Who It's For

Features

Resources

Company

View Sitemap