Home/Tools/Typography/CSS Clamp Generator

Typography · Generator

CSS Clamp Generator

Generate clamp() values for fluid font-size, padding, margin, and width.

Clamp Settings

Property

Unit

Minimum Value16px

Maximum Value24px

Minimum Viewport320px

Maximum Viewport1200px

Preview

Resize your browser to see the effect

Current font-size: clamp(16px, 13.0909px + 0.9091vw, 24px)

Generated CSS

font-size: clamp(16px, 13.0909px + 0.9091vw, 24px);

100%

Free, no
sign-up needed

Code written
by hand

85+

CSS tools
in one place

<1s

Copy-ready
CSS instantly

What is this

What is the CSS Clamp Generator?

Generate clamp() expressions for any CSS property - font size, spacing, width, or more. Input min, max, and viewport range, get the formula.

Everything runs locally in your browser. Adjust the controls above, preview instantly, and copy clean, production-ready CSS — no account, no upload.

How to use

Using the CSS Clamp Generator

Everything lives in the panel at the top of this page. There is nothing to install — it all runs right here in your browser.

Enter min and max values

Set the minimum value (at the smallest viewport) and maximum value (at the largest viewport). Use px or rem.

Enter the viewport range

Set the viewport widths that correspond to the min and max values. The generator calculates the linear interpolation formula.

Copy the clamp() output

Click Copy to grab the computed clamp() expression. The formula is ready to paste as any CSS length value.

The output

What the generated code looks like

Clean, production-ready CSS — no vendor bloat, no unnecessary declarations.

styles.css

/* General clamp pattern */
.element {
  /* property: clamp(min, preferred, max) */
  font-size:  clamp(1rem,   2.5vw + 0.5rem, 2rem);
  padding:    clamp(1rem,   3vw,             3rem);
  max-width:  clamp(280px,  90%,             960px);
  gap:        clamp(0.5rem, 2vw,             1.5rem);
}

clamp() works on any CSS length property. It is not limited to font-size.

Pro tips

Pro tips for better results

★

clamp() is not just for font sizes

Use clamp() for padding, gap, margin, border-radius, width - any property that should scale proportionally with viewport size without breakpoints.

★

Avoid going below the accessibility minimum for text

WCAG recommends 16px as the minimum comfortable reading size for body text. Set your clamp minimum no lower than 1rem (16px) for paragraph text.

★

The preferred value can be a complex expression

clamp(1rem, calc(0.5rem + 2vw), 2rem) is valid. The preferred value can use calc(), vw, vh, vmin, or vmax, combined with fixed units.

FAQ

Frequently asked questions

They are the same technique. Fluid typography uses clamp() specifically for font-size. The CSS Clamp Generator is the general version - use it for font-size, spacing, widths, or any property that should scale with viewport.

Yes. calc() and clamp() can be nested. For example: width: calc(clamp(200px, 50%, 600px) - 32px) subtracts a fixed gutter from a clamped width.

No. Everything runs in your browser. Nothing is sent to a server.