What does clamp() do in CSS?

clamp(min, preferred, max) returns the preferred value but never less than min or more than max. With a preferred value that includes vw, the size grows with the viewport between two limits, with no media queries. Chrome and Edge support it from version 79, Firefox from 75 and Safari from 13.1.

How do I calculate a CSS clamp for fluid typography?

Pick the size at your smallest and largest viewport and enter both widths; the tool draws a straight line between the two points. Body text from 16px on a 375px phone to 20px on a 1440px laptop gives clamp(1rem, 0.912rem + 0.3756vw, 1.25rem). Set the viewport fields to the breakpoints your own layout uses, not the 320 and 1280 the page starts with.

Why does the generated clamp use rem and vw together?

The vw part makes the size follow the viewport. The rem part keeps it tied to the reader’s font size setting, so the text still gets bigger when someone zooms or raises their default font size. A preferred value in vw alone barely responds to zoom.

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

Yes. clamp() works for any length, so the same calculation gives fluid spacing. Enter the smallest and largest spacing in place of font sizes.

How do I make a fluid type scale for Tailwind v4?

Add one size per step under Add size, choose Tailwind v4 @theme and copy the block. Body 16 to 18px, h2 24 to 32px and h1 32 to 48px over 320 to 1280px give @theme { --text-body: clamp(1rem, 0.9583rem + 0.2083vw, 1.125rem); --text-h2: clamp(1.5rem, 1.3333rem + 0.8333vw, 2rem); --text-h1: clamp(2rem, 1.6667rem + 1.6667vw, 3rem); }. Tailwind v4 reads --text-* theme variables as font-size utilities, so you get text-body, text-h2 and text-h1. The CSS choice writes the same values as --fs-body and so on, and SCSS as $fs-body.

Can I paste an existing clamp() and change it?

Yes. The "Paste an existing clamp() to edit" box sits under the fields in either mode. Paste the value, press Load, and the minimum, preferred expression and maximum fill the "Type min, preferred and max" fields. Only the first clamp( in the text is read, and a value that cannot be parsed gets a message.

CSS Clamp Generator

Generate a CSS clamp() value for fluid typography. Enter a min and max size and a viewport range to get the clamp, its slope and intercept, and a live preview. How it works

How do you want to build it?

Minimum size

Size at the minimum viewport width

Maximum size

Size at the maximum viewport width

Minimum viewport width (px)

Maximum viewport width (px)

Size unit

Root font size (px)

Write the result in

Paste an existing clamp() to edit

Accepts a single clamp(...) string. For multi-line input, only the first clamp( occurrence is scanned — if it is invalid, the paste is rejected and later lines are ignored.

Generated clamp()

clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem)

clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem)

Set of sizes

Add more sizes (a type scale, spacing steps) that share the viewport range, size unit, output unit and root size above. They are copied together as one block.

How it is calculated

Slope: (24 − 16) ÷ (1280 − 320) = 0.008333 px per px
vw coefficient: slope × 100 = 0.8333vw
Intercept: 16px − 0.008333 × 320px = 13.3333px = 0.8333rem

Size the clamp resolves to
Viewport	Size (px)	Size (rem)
320px	16	1
768px	19.7333	1.2333
1024px	21.8667	1.3667
1280px	24	1.5
1920px	24	1.5

Expression Breakdown:

+0.8333 rem+0.8333 vw

Live Preview · simulating 960px viewport

font: clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem);

The quick brown fox jumps over the lazy dog.

Device width:px

Simulated:50%

1rem

Min

0.8333rem + 0.8333vw

Preferred

1.5rem

Max

Common Use Cases

About the CSS Clamp Generator

To scale a size from 16px on a 320px screen to 24px on a 1280px screen, use clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem). This CSS clamp generator works that out from two sizes and two viewport widths, so you do not have to calculate the slope and intercept by hand.

Fluid font size clamps for a 320px to 1280px viewport

Size range	clamp() value
14px to 16px	clamp(0.875rem, 0.8333rem + 0.2083vw, 1rem)
16px to 18px	clamp(1rem, 0.9583rem + 0.2083vw, 1.125rem)
16px to 20px	clamp(1rem, 0.9167rem + 0.4167vw, 1.25rem)
16px to 24px	clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem)
20px to 32px	clamp(1.25rem, 1rem + 1.25vw, 2rem)
24px to 40px	clamp(1.5rem, 1.1667rem + 1.6667vw, 2.5rem)
32px to 48px	clamp(2rem, 1.6667rem + 1.6667vw, 3rem)
32px to 64px	clamp(2rem, 1.3333rem + 3.3333vw, 4rem)
40px to 72px	clamp(2.5rem, 1.8333rem + 3.3333vw, 4.5rem)

Each value is the smaller size at 320px wide, the larger at 1280px, and a straight line in between, with a 16px root font size. Change the viewport range in the calculator if your breakpoints differ.

Methodology

The preferred value is a straight line through two points. Slope = (max size − min size) ÷ (max viewport − min viewport), with sizes in px. The vw coefficient is slope × 100, and the intercept is min size − slope × min viewport, converted to rem by dividing by the root font size. Numbers are rounded to four decimal places. If the size gets smaller as the screen gets wider, the two limits are swapped so the first argument of clamp() is still the smaller one, and the vw term becomes negative.

How to use this tool

Enter the size you want on the smallest screen and on the largest, in px or rem.
Enter the two viewport widths those sizes belong to. 320 and 1280 are filled in to start with.
Copy the clamp() as a plain value, a CSS custom property, a Tailwind arbitrary value or a SCSS variable, or press Share link to copy a link with the sizes and viewports.
For a type scale, press Add size (up to 12 named sizes on the same viewport range) and copy them together as CSS custom properties, SCSS variables or a Tailwind v4 @theme block.
To edit a clamp you already have, paste it into "Paste an existing clamp() to edit" and press Load or Enter. Its three parts load into the editor, and the tool switches to "Type min, preferred and max" by itself.

Frequently asked questions

What does clamp() do in CSS?: clamp(min, preferred, max) returns the preferred value but never less than min or more than max. With a preferred value that includes vw, the size grows with the viewport between two limits, with no media queries. Chrome and Edge support it from version 79, Firefox from 75 and Safari from 13.1.
How do I calculate a CSS clamp for fluid typography?: Pick the size at your smallest and largest viewport and enter both widths; the tool draws a straight line between the two points. Body text from 16px on a 375px phone to 20px on a 1440px laptop gives clamp(1rem, 0.912rem + 0.3756vw, 1.25rem). Set the viewport fields to the breakpoints your own layout uses, not the 320 and 1280 the page starts with.
Why does the generated clamp use rem and vw together?: The vw part makes the size follow the viewport. The rem part keeps it tied to the reader’s font size setting, so the text still gets bigger when someone zooms or raises their default font size. A preferred value in vw alone barely responds to zoom.
Can I use clamp() for padding, margin and gap?: Yes. clamp() works for any length, so the same calculation gives fluid spacing. Enter the smallest and largest spacing in place of font sizes.
How do I make a fluid type scale for Tailwind v4?: Add one size per step under Add size, choose Tailwind v4 @theme and copy the block. Body 16 to 18px, h2 24 to 32px and h1 32 to 48px over 320 to 1280px give @theme { --text-body: clamp(1rem, 0.9583rem + 0.2083vw, 1.125rem); --text-h2: clamp(1.5rem, 1.3333rem + 0.8333vw, 2rem); --text-h1: clamp(2rem, 1.6667rem + 1.6667vw, 3rem); }. Tailwind v4 reads --text-* theme variables as font-size utilities, so you get text-body, text-h2 and text-h1. The CSS choice writes the same values as --fs-body and so on, and SCSS as $fs-body.
Can I paste an existing clamp() and change it?: Yes. The "Paste an existing clamp() to edit" box sits under the fields in either mode. Paste the value, press Load, and the minimum, preferred expression and maximum fill the "Type min, preferred and max" fields. Only the first clamp( in the text is read, and a value that cannot be parsed gets a message.

What clamp() is for

clamp(min, preferred, max) lets one declaration scale a font size, padding or gap with the viewport and stop at a floor and a ceiling, so you need no media queries. Enter the size you want on a phone and on a desktop, plus the two viewport widths, and the generator writes the clamp() for you. You can also paste an existing clamp to edit it, or type the three parts yourself.

For a whole type scale or spacing set, Add size gives up to 12 named sizes on the same viewport range, copied as one block of CSS custom properties, SCSS variables or a Tailwind v4 @theme block. Body 16 to 18px, h2 24 to 32px and h1 32 to 48px over 320 to 1280px give --text-body: clamp(1rem, 0.9583rem + 0.2083vw, 1.125rem);, --text-h2: clamp(1.5rem, 1.3333rem + 0.8333vw, 2rem); and --text-h1: clamp(2rem, 1.6667rem + 1.6667vw, 3rem);, which Tailwind turns into text-body, text-h2 and text-h1. Share link copies the single size and viewport settings, not the set.

The fluid clamp formula

The preferred value is a straight line through two points. slope = (max size − min size) ÷ (max viewport − min viewport), the vw number is slope × 100, and intercept = min size − slope × min viewport. Example: section padding of 24px on a 375px phone and 48px on a 1440px screen gives a slope of 24 ÷ 1065 = 0.022535, so 2.2535vw, and an intercept of 24 − 0.022535 × 375 = 15.55px, which is 0.9718rem at a 16px root. The result is clamp(1.5rem, 0.9718rem + 2.2535vw, 3rem): 24px at 375px, 48px at 1440px, and held at those limits outside that range. Coefficients are rounded to four decimals, so at 375px the preferred value works out to 23.9994px rather than exactly 24px.

Fun Fact: Text sized in vw alone barely changes when a reader zooms the page. Keeping a rem term in the preferred value, as the generated clamp does, means zoom and the browser font-size setting still work.

Related Tools

View all tools

CSS

PX to REM Converter

Convert px to rem and rem to px at any base font size (16px by default), with em, pt and percent conversion and a px to rem chart for common sizes.

CSS

CSS Font Preview

Preview a standard font stack or any Google Fonts family at 8 to 120 px with weight, line height and letter spacing, and copy the CSS and @import.

CSS

Font Pair Generator

Get a heading and body font pairing from 15 Google Fonts combinations, lock or swap either font, try your own text, and copy the CSS or the Google Fonts link.

CSS

CSS Text Shadow Generator

Stack up to 5 text-shadow layers with offset, blur, color and opacity, preview them on light or dark, and copy the CSS, variable or Tailwind class.

CSS

CSS Animation Generator

Build a CSS @keyframes animation from up to five steps of rotate, scale, opacity and translate. Set timing, repeats, direction and fill, then copy the code.

CSS

CSS Border Radius Generator

Set a CSS border-radius for each corner in px or %, with elliptical radii and a live preview. Copy CSS, Tailwind, React Native, SCSS or clip-path code.