CSS Clamp

CSS clamp() generator for fluid typography and spacing

Screen width
1152px

Actions

Clamp sizes

The smallest and largest size, for padding, margin or font size.

rem
rem

Viewport settings

The screen widths where the value starts and stops growing.

rem
rem

The clamped value will be between 1rem and 8rem, applied linearly between viewports of 24rem and 120rem.

CSS clamp() generator

Fluid typography and spacing without media queries

One clamp() value replaces a stack of breakpoints. Pick a minimum and a maximum size, and every screen width in between gets its own value.

Preview at any screen width

Drag the screen width and watch the value change in a real, scaled browser window. What you see is exactly what the CSS does.

Font sizes and spacing

Switch between text and container mode to tune fluid typography, padding, margin and gaps with the same formula.

Accessible by default

Values are written in rem with a rem intercept, so they keep respecting browser zoom and the user’s font size setting.

How to generate a clamp() value

  1. 1Enter the smallest and largest size you want, for example 1rem and 3rem.
  2. 2Set the viewport range where the value should grow, for example 24rem (384px) to 120rem (1920px).
  3. 3Check the result in the preview and copy the clamp() value into your CSS or Tailwind theme.

The result, ready to paste:

font-size: clamp(1rem, 0.625rem + 1.563vw, 2.5rem);

16px on a 384px screen, 40px on a 1920px screen, and a smooth line in between.

More clamp() tools

Font size clamp() generatorFluid typography that scales smoothly between two screen widths.Spacing clamp() generatorFluid padding and margin, previewed on a real layout.Fluid type scale generatorA complete clamp() type scale from one base size and ratio.Tailwind CSS clamp() generatorFluid values as Tailwind v4 or v3 theme tokens, or as a class.Line height clamp() generatorLine spacing that opens up as lines get longer.Gap clamp() generatorFluid grid and flexbox gaps that grow with the screen.Border radius clamp() generatorCorners that stay in proportion as elements grow.px to rem converterConvert between px, rem and vw with any base size.

Learn more about clamp()

How to use CSS clamp()The syntax, how to read a clamp value and when to use it.Tailwind CSS clamp() guideFluid font sizes and spacing in Tailwind CSS v4 and v3.The maths behind clamp()Slope, intercept, zoom and accessibility, and container units.ExamplesA fluid type scale and a dashboard layout with fluid gutters.clamp() vs media queriesContinuous scaling versus breakpoints, and when to use each.clamp() vs min() and max()How the three comparison functions relate, with examples.Fluid typography accessibilityZoom, WCAG 1.4.4 and how to keep fluid text resizable.clamp() with container query unitsComponents that scale with their container instead of the window.Sass clamp() functionA fluid() function and mixin for SCSS projects.clamp() in BootstrapFluid font sizes and spacers instead of RFS.clamp() in CSS-in-JSA fluid() helper for styled-components, Emotion and vanilla-extract.

Frequently asked questions

What is a CSS clamp() generator?

A CSS clamp() generator calculates a clamp() value that grows smoothly from a minimum size on small screens to a maximum size on large screens. You enter the two sizes and the viewport range, and it returns a value like clamp(1rem, 0.5rem + 2vw, 3rem) that you can paste into any CSS property that takes a length.

How do I calculate a clamp() value?

Divide the size range by the viewport range to get the slope, then subtract slope × minimum viewport from the minimum size to get the intercept. The preferred value is intercept + slope × 100vw. For 1rem to 8rem between 24rem and 120rem that gives clamp(1rem, -0.75rem + 7.292vw, 8rem). The generator does this for you.

Should I use px or rem in clamp()?

Use rem for the minimum, the maximum and the intercept. rem values follow the user’s browser font size and zoom, while px values do not. You can still think in pixels: 16px is 1rem at the default font size, and the generator converts between the two.

What is the difference between clamp() and media queries?

Media queries switch a value at fixed breakpoints, so it jumps from one size to the next. clamp() changes the value continuously with the screen width, so every width gets its own size. Use clamp() for sizes and spacing, and media or container queries when the layout itself changes, like going from one column to three.

Can I use clamp() for padding, margin and gap?

Yes. clamp() works in any property that accepts a length, including padding, margin, gap, width, height, border-radius and line-height. Switch the generator to container mode to preview spacing instead of text.

Is clamp() supported in all browsers?

Yes. clamp() is supported in every current browser, including Chrome, Edge, Firefox and Safari, and has been since 2020.

Can I use clamp() with Tailwind CSS?

Yes. Use an arbitrary value like text-[clamp(1rem,0.5rem+2vw,3rem)] for a one-off, or add the value to your theme. In Tailwind CSS v4 a --text-* or --spacing-* variable in @theme creates the utilities for you. See the Tailwind CSS clamp() guide for details.

Is fluid typography accessible?

It can be. Avoid font sizes in pure viewport units, because they shrink when users zoom in. Use rem for the bounds and the intercept, keep the maximum within about 2.5 times the minimum for text, and test at 200% zoom.

Which viewport widths should I use?

Use the smallest and largest widths your design is made for. A common range is 360px to 1440px, or 24rem to 120rem if you want the value to keep growing on large monitors. Outside that range the value stays at the minimum or maximum.