How does CSS clamp() work?

clamp(min, preferred, max) uses the preferred value while it stays between min and max. Below that range you get min; above it you get max. For fluid type, preferred usually mixes a length with vw.

How do I calculate a CSS clamp() value?

Convert sizes to pixels, compute slope = (max − min) / (maxViewport − minViewport), then intercept = min − slope × minViewport. Preferred is intercept plus slope × 100vw. Wrap min, preferred, and max in clamp().

How do I create responsive font sizes with clamp()?

Set font-size to a clamp whose min is the mobile size, max is the desktop size, and preferred interpolates across your viewport range. Keep body text in a tight band so it stays readable.

Should I use px or rem with CSS clamp()?

Use rem when the size should honor the root font size, which is the usual choice for type. Use px when matching a pixel-perfect mock. Keep min, intercept, and max in the same unit; do not mix them in one clamp.

Can CSS clamp() be used for padding and spacing?

Yes. The same interpolation works for padding, padding-inline, margin, gap, column-gap, and row-gap. Change the property in this calculator or switch to Spacing Scale for a set of tokens.

Can I use clamp() instead of media queries?

Use clamp() when a single length should scale smoothly. Keep media queries or container queries for layout changes such as column count, navigation, or visibility. Clamp does not replace those.

What viewport widths should I use for fluid typography?

Use the smallest and largest widths your design was actually drawn at, often about 320px–375px on the low end and 1280px–1440px on the high end. A 1920px max is fine if the type should still grow that far.

Does CSS clamp() work in modern browsers?

Yes. clamp() is supported in current Chrome, Edge, Firefox, and Safari, including iOS Safari, dating back to Chrome 79, Firefox 75, and Safari 13.1. Add a static font-size fallback only if you still support older clients.

Can I use CSS clamp() with Tailwind CSS?

Yes. Paste the expression into an arbitrary value such as text-[clamp(1rem,0.8333rem+0.8333vw,1.5rem)] or p-[clamp(...)]. This calculator’s Tailwind tab writes that class for the selected property.

Does this calculator run in the browser?

Yes. Interpolation, preview, copy, and share-link encoding all run on your device. Opening a shared URL restores the same inputs; the canonical page stays /css-clamp-calculator without query strings in the sitemap.

CSS Clamp Calculator for Fluid Typography & Spacing

Enter a minimum, a maximum, and the viewport range you design for. The calculator writes a concise clamp() for font-size, padding, gap, and other lengths, then shows how that value behaves from 320px to 1920px.

Controls

Presets

Property

Unit

Minimum (rem)

Maximum (rem)

Minimum viewport (px)

Maximum viewport (px)

Root font size (px)

Used when converting rem ↔ px

Precision

Generated CSS

clamp(1rem, 0.8571rem + 0.7143vw, 1.5rem)

Viewport simulator

Simulated width

Width (px)

Viewport: 768px
Computed: 1.2rem
Bounds: 1rem – 1.5rem
State: Fluid

The quick brown fox jumps over the lazy dog.

Values at common breakpoints

Computed clamp values from 320px to 1920px
Viewport	Computed value	Unit	State
320px	1rem	rem	Minimum
375px	1.0246rem	rem	Fluid
414px	1.042rem	rem	Fluid
480px	1.0714rem	rem	Fluid
640px	1.1429rem	rem	Fluid
768px	1.2rem	rem	Fluid
1024px	1.3143rem	rem	Fluid
1280px	1.4286rem	rem	Fluid
1440px	1.5rem	rem	Maximum
1920px	1.5rem	rem	Maximum

Formula and math breakdown

slope = (max − min) / (max viewport − min viewport) = 0.007143 px per px of viewport

intercept = min − slope × min viewport = 13.7143px (0.8571rem)

preferred = 0.8571rem + 0.7143vw

Result: clamp(1rem, 0.8571rem + 0.7143vw, 1.5rem)

Check: at 320px → 1rem; at 1440px → 1.5rem; at 768px → 1.2rem (Fluid).

A CSS clamp calculator — also used as a CSS clamp generator — turns a minimum size, a maximum size, and two viewport widths into one clamp() value. That is the usual way to build fluid typography and responsive font size or spacing without a stack of media queries. The preferred value is a linear mix of rem or px plus vw, so the computed length sits at the minimum on small screens, interpolates in the middle, and stops at the maximum on large screens. You choose the bounds from the design; the calculator only does the interpolation math.

What is CSS clamp()?

clamp(min, preferred, max) is a CSS math function. The used value is the preferred expression as long as it stays between min and max. If preferred would go below min, you get min. If it would go above max, you get max. For fluid type and spacing, preferred is usually a length that includes vw so it tracks viewport width.

That is different from using vw alone. Pure viewport units keep shrinking on a 320px phone and keep growing on a 4K monitor. Clamp puts a floor and a ceiling on that growth.

What is a CSS Clamp Calculator?

A CSS Clamp Calculator solves the linear interpolation for you. You enter the size you want at the small viewport, the size you want at the large viewport, and those two widths. The tool returns a concise clamp() string you can paste into a stylesheet, a custom property, or a Tailwind arbitrary value.

This page also acts as a fluid typography calculator and a responsive font size calculator. The same math covers padding, margin, and gap, so it is a CSS clamp padding calculator and a fluid spacing calculator when you change the property. All of that runs in the browser; nothing is uploaded.

How to use the CSS Clamp Calculator

Stay on Single Value unless you need a full type or spacing scale.
Pick a property such as font-size, padding, or gap.
Enter minimum and maximum sizes, then the viewport range those sizes belong to.
Choose rem or px. Rem stays tied to the root font size (16px by default).
Copy Clamp Value, Full CSS, a CSS variable, or the Tailwind class.
Drag the viewport simulator to confirm the state is Minimum, Fluid, or Maximum.
Use Share Configuration when you want a teammate to open the same numbers.

CSS clamp formula

Work in pixels, then convert min, max, and the intercept back to rem if that is your output unit. Viewport widths stay in CSS pixels. The vw coefficient is the pixel slope times 100, because 1vw is 1% of the viewport width in pixels.

slope = (maxSize − minSize) / (maxViewport − minViewport)
intercept = minSize − slope × minViewport
preferred = intercept + slope × 100vw
result = clamp(min, preferred, max)

Example: 1rem to 1.5rem between 320px and 1280px, root 16px, becomes clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem). At 320px that evaluates to 16px. At 1280px it evaluates to 24px. Between those widths it is fluid.

CSS clamp examples

These snippets are starting points, not universal tokens. Change the min, max, and viewport range to match the type ramp and spacing in your files.

Responsive font size

Body text that is 16px on a 320px viewport and 24px on a 1280px viewport:

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

Responsive heading

A looser heading using a simple preferred vw. It still has a 2rem floor and a 4rem ceiling, but the slope is not locked to a specific pair of design widths:

font-size: clamp(2rem, 4vw, 4rem);

Responsive padding

Section padding that grows with the viewport, then stops. Same CSS clamp padding idea as type, different property:

padding: clamp(1rem, 2vw, 3rem);

Responsive gap

Card or flex gap that stays readable on a phone and opens up on a desktop:

gap: clamp(0.5rem, 1vw, 1.5rem);

Fluid typography with clamp()

Fluid typography means the type size tracks viewport width instead of jumping at a breakpoint. CSS clamp for font size is the usual implementation: one declaration on html, body, or a heading token. Keep body text in a narrow band (often 1rem to about 1.125rem) so line length and reading size stay comfortable. Headings can travel farther.

If you need a named modular scale rather than one size, switch this tool to Typography Scale, or build the ratio first in the Typography Scale Generator and then clamp each step. After the sizes exist, check contrast of the actual type color in the Color Contrast Checker.

Responsive font size with clamp()

A responsive font size CSS clamp is just font-size plus the formula above. Pick the mobile size from the smallest layout you support, pick the desktop size from the largest layout that still looks intentional, and set min/max viewports to those widths. Do not set the maximum viewport to 3840px if the design was drawn at 1440px — the slope becomes too shallow and the type barely moves on phones.

Clamp for padding, margin, and gap

The same interpolation is a CSS clamp spacing calculator. Use it for section padding, card gap, container inline padding, and sometimes margin. A clamp gap calculator is useful in flex and grid layouts where the gap should breathe on large screens without looking sparse on small ones.

Spacing Scale mode emits --space-N custom properties from a 4pt, 8pt, 12pt, or 16pt base. Pair those tokens with a layout from the CSS Grid Generator. For a static spacing ladder without viewport interpolation, the Spacing Scale Assistant is a closer fit.

CSS clamp vs media queries

Media queries still win when the layout changes: one column to three, a nav that collapses, a sidebar that docks. Clamp wins when a single length should move continuously. Replacing every breakpoint with clamp() usually makes the CSS harder to reason about, not easier.

When to use clamp versus media queries
Approach	Best for	Weakness
clamp()	Font size, padding, gap, radius that should scale smoothly	Does not change document flow or component structure
@media / @container	Layout, visibility, grid tracks, navigation patterns	Stepped jumps unless you add several breakpoints

px vs rem

Prefer rem for font-size and for spacing that should honor the user’s root font size. Prefer px when you are matching a screenshot in device pixels and will convert later. Mixing a rem min with a px max inside the same clamp is legal CSS and a common source of bugs — this calculator keeps one unit for min, intercept, and max. The vw term is always a viewport percentage; it is not converted to rem.

If you need to convert a leftover px token to rem before clamping, use the CSS Unit Converter.

Common mistakes

Using only vw. Text can become unreadable on small phones and huge on wide monitors.
Wrong viewport range. If min and max viewports are 375 and 1920 while the design was 390 and 1280, the slope is wrong on every device in between.
Mixing px and rem in one expression without converting through the root size first.
Unrealistic min and max. Body text that clamps from 10px to 32px is not a type system.
Expecting clamp() to replace every media query, including layout.
Layout-critical widths (column width, sticky offset) without testing overflow and wrapping.
Body text that drops below about 16px on mobile, which most teams treat as a floor.
Hard-to-read fluid scales where every step uses a huge range, so small and large type collide at mid-width.

When not to use clamp()

Skip clamp when the value should not move: hairline borders, icon boxes that must stay 24px, and type that already has a fixed modular scale at each breakpoint. Skip it when the preferred value would be a percentage of a parent that is not the viewport — container query units or cqi are a better model there. Skip it when legal or brand rules require an exact pixel size at every width.

Browser support

clamp(), min(), and max() work in current Chrome, Edge, Firefox, and Safari, including current iOS Safari. They have been in baseline browsers since the 2020 generation (Chrome 79, Firefox 75, Safari 13.1). If you still ship to a browser older than that, keep a static font-size declaration above the clamp line as a fallback.

Design-system use cases

Teams usually store one clamp per token: --font-size-body, --font-size-h1, --space-4, --radius-card. The CSS Variable tab on this calculator writes that shape. Tailwind users paste the Clamp Value into an arbitrary class such as text-[clamp(1rem,0.8333rem+0.8333vw,1.5rem)].

Fluid radius belongs with the Border Radius Generator when you are shaping a corner, then clamp the length if the radius should grow with the viewport. Elevation still comes from the Box Shadow Generator. Backgrounds are a separate job in the CSS Gradient Generator. For a clipped hero image, use the CSS Clip Path Generator.

Common ways people search for this tool

Most queries are “CSS clamp calculator” or “CSS clamp generator.” Adjacent searches include clamp calculator CSS, CSS clamp() calculator, fluid font size calculator, and CSS clamp rem calculator. People looking for spacing type “CSS clamp padding calculator,” “clamp margin calculator,” or “clamp gap calculator.” Those are the same interpolation with a different property. This page defaults to a single font-size value so the primary job stays obvious.

Frequently Asked Questions

What is a CSS clamp calculator?: It is a tool that converts a minimum size, a maximum size, and two viewport widths into a CSS clamp() expression. You use the result for fluid typography or spacing instead of writing the interpolation by hand.
How does CSS clamp() work?: clamp(min, preferred, max) uses the preferred value while it stays between min and max. Below that range you get min; above it you get max. For fluid type, preferred usually mixes a length with vw.
How do I calculate a CSS clamp() value?: Convert sizes to pixels, compute slope = (max − min) / (maxViewport − minViewport), then intercept = min − slope × minViewport. Preferred is intercept plus slope × 100vw. Wrap min, preferred, and max in clamp().
What is the CSS clamp formula?: slope = (maxSize − minSize) / (maxViewport − minViewport). intercept = minSize − slope × minViewport. preferred = intercept + slope × 100vw. The declaration is clamp(min, preferred, max).
How do I create responsive font sizes with clamp()?: Set font-size to a clamp whose min is the mobile size, max is the desktop size, and preferred interpolates across your viewport range. Keep body text in a tight band so it stays readable.
Should I use px or rem with CSS clamp()?: Use rem when the size should honor the root font size, which is the usual choice for type. Use px when matching a pixel-perfect mock. Keep min, intercept, and max in the same unit; do not mix them in one clamp.
Can CSS clamp() be used for padding and spacing?: Yes. The same interpolation works for padding, padding-inline, margin, gap, column-gap, and row-gap. Change the property in this calculator or switch to Spacing Scale for a set of tokens.
Can I use clamp() instead of media queries?: Use clamp() when a single length should scale smoothly. Keep media queries or container queries for layout changes such as column count, navigation, or visibility. Clamp does not replace those.
What viewport widths should I use for fluid typography?: Use the smallest and largest widths your design was actually drawn at, often about 320px–375px on the low end and 1280px–1440px on the high end. A 1920px max is fine if the type should still grow that far.
Does CSS clamp() work in modern browsers?: Yes. clamp() is supported in current Chrome, Edge, Firefox, and Safari, including iOS Safari, dating back to Chrome 79, Firefox 75, and Safari 13.1. Add a static font-size fallback only if you still support older clients.
Can I use CSS clamp() with Tailwind CSS?: Yes. Paste the expression into an arbitrary value such as text-[clamp(1rem,0.8333rem+0.8333vw,1.5rem)] or p-[clamp(...)]. This calculator’s Tailwind tab writes that class for the selected property.
Does this calculator run in the browser?: Yes. Interpolation, preview, copy, and share-link encoding all run on your device. Opening a shared URL restores the same inputs; the canonical page stays /css-clamp-calculator without query strings in the sitemap.