Skip to content
3Wdesign
Start a project
3Wdesign
Get in touch
  1. Home
  2. Tools
  3. CSS clamp() generator
Runs in your browserDesign

CSS clamp() generator

Enter the size you want at the smallest and the largest viewport; the value grows linearly in between and stays fixed outside.

Runs locally — nothing is uploaded
Result
Enter the min and max sizes.

How to use

  1. 1Enter the size at the smallest viewport and at the largest.
  2. 2Set the viewport widths where scaling starts and stops.
  3. 3Keep rem output so the value respects the user's font size.
  4. 4Copy the declaration or just the clamp() value.

Between the two widths the size is a straight line: intercept + slope × viewport width. clamp() keeps it between the min and max sizes, so it stops growing outside the range.

Mostly, if part of the value is in rem. vw does not grow with browser zoom, so if the max size is more than about 2.5× the min, zoomed text may not reach 200% (WCAG 1.4.4). The tool warns about this.

Yes. The value works for any length property: padding, margin, gap or width.

Related tools

Contrast checkerWCAG AA/AAA contrast ratio, plus APCAColor converterHEX, RGB, HSL, OKLCH and CMYK in one goPalette generatorOKLCH color scales and harmoniesType scaleModular font sizes with a live previewPX to REM converterBatch px ⇄ rem for any root sizeAspect ratio calculatorSimplify W:H and resize without distortion

Let's make something good

Tell us about your project — we reply within one business day.

Get in touchServices