How is the preferred value calculated?

It solves a linear equation between the min and max viewport/size pairs to get a slope and intercept, expressed in vw units.

Can I output rem instead of px?

Yes, toggle 'Use rem' and set your root font size to convert the min/max sizes and slope to rem.

Can I apply this to other properties like padding?

Yes, change the CSS property field — the same clamp() logic works for any length property.

Does the preview reflect actual browser resizing?

The preview text uses a live clamp() style, so resizing your browser window shows the real fluid scaling.

Is my data uploaded to a server?

No. This tool runs entirely in your browser using standard web APIs, so your input never leaves your device and nothing is logged or stored on our servers.

CSS Clamp() Calculator

Generate fluid typography clamp() CSS from min/max viewport and size.

Support

Works Offline

Privacy First

No Login

No API

CSS property

Min size (px)

Max size (px)

Min viewport (px)

Max viewport (px)

Use rem

Root font size (px)

Live preview

Resize your browser window to see this text scale fluidly between 16px and 32px.

Preview uses your live browser width — resize the window to test the full range.

Generated CSS

CSS

font-size: clamp(1.0000rem, 0.6479rem + 1.5023vw, 2.0000rem);

About the CSS Clamp() Calculator

Enter a minimum and maximum font size along with a minimum and maximum viewport width to generate a fluid clamp() CSS value, with a live preview and copy-ready output in px or rem.

Examples

16px to 32px

375px-1440px viewport

Output

font-size: clamp(16px, 0.8889rem + 2.9630vw, 32px);

Keyboard shortcuts

Copy the main outputCtrl / ⌘ + Shift + C
Download the resultCtrl / ⌘ + S
Share this toolCtrl / ⌘ + Shift + S
Reset the inputsAlt + R
Open the tool search paletteCtrl / ⌘ + K

Related tools

CSS Aspect Ratio Calculator

HTML & CSS

Simplify ratios and compute matching dimensions.

CSS Scrollbar Styler

HTML & CSS

Design custom scrollbars with live preview.

CSS Transform Playground

HTML & CSS

Combine translate, rotate, scale, and skew with a live preview.

CSS Variables Theme Builder

HTML & CSS

Build a custom property theme with a live preview.

Email Signature Generator

HTML & CSS

Design a professional HTML email signature and copy it into any mail client.

HTML Table Generator

HTML & CSS

Build an editable HTML table and export HTML + CSS.

Frequently asked questions

Version 1.0.0 · Updated 2026-08-11 · Runs entirely in your browser