CSS Clamp() Generator

Generate responsive CSS clamp() expressions for fluid typography and spacing. Set min, max, and preferred fluid values with a live preview.

CSS clamp() lets you set a value that scales between a minimum and maximum based on viewport size. Enter a minimum value, a maximum value, and a fluid preferred expression using viewport units.

Paste an existing clamp() to edit

Accepts a single clamp(...) string. Multi-line lists are supported — the first valid entry is used.

Minimum

Smallest value the property can take

Maximum

Largest value the property can take

Preferred Expression

Suggestions:

The expression that calculates the fluid value. Typically uses viewport units (vw) combined with fixed units (rem, px, em).

Generated CSSclamp(1rem, 0.5rem + 2vw, 3rem)

Expression Breakdown:

+0.5 rem+2 vw

Live Preview · simulating 960px viewport

font: clamp(1rem, 0.5rem + 2vw, 3rem);

The quick brown fox jumps over the lazy dog.

Device width:px

Simulated:50%

1rem

Min

0.5rem + 2vw

Preferred

3rem

Max

Common Use Cases

Loading Tool...

Applications

Used for fluid responsive typography (h1–h6, body copy, line-heights), fluid spacing systems (padding, margin, gap, border-radius), container-relative sizing (width, height, max-width), and any layout value that should scale smoothly between a mobile minimum and a desktop maximum — all without writing a single CSS media query. Designers and front-end engineers reach for clamp() when building modern type scales, design tokens, and component libraries that must look intentional on a 320px phone and a 1920px monitor with the same single declaration.

How clamp() Works — The Math

CSS clamp(min, preferred, max) returns whichever of the three values is appropriate for the current context. The browser evaluates the preferred expression at the current viewport width and then clamps the result so it is never smaller than min nor larger than max. The standard rewrite of a two-point fluid scale is: preferred = (slope × 100)vw + intercept rem, where slope = (max - min) / (max_viewport - min_viewport) and intercept = min - slope × min_viewport. For example, scaling a heading from 1.5rem (at 320px) to 3rem (at 1440px) gives slope = (3 - 1.5) / (1440 - 320) ≈ 0.00134, so a valid expression is clamp(1.5rem, 0.43rem + 2.13vw, 3rem). All modern browsers (Chrome 79+, Firefox 75+, Safari 13.1+, Edge 79+) interpolate natively — no JavaScript, no @media.

Fun Fact: The inflection point — the exact viewport width where the preferred value stops scaling and pins to the max — is given by 1 / slope (in vw units, where slope is the decimal form of (max - min) / (max_vw - min_vw)). For the 1.5rem → 3rem scale above, the fluid band ends at about 1 / 0.0134 ≈ 74.6rem ≈ 1193px, after which the value is locked at 3rem. Designers use this number to align the fluid band with the start of their desktop breakpoint.

Related Tools

View all tools

CSS

Color Contrast Checker

Check color accessibility (WCAG) compliance. Ensure your text is readable against backgrounds for all users.

CSS

Color Mixer

Mix two colors to create the perfect blend. Generate intermediate steps between two Hex codes for gradients and UI states.

CSS

Color Palette Generator

Generate beautiful color palettes and schemes. Explore monochromatic, analogous, triadic, complementary, and split-complementary color harmonies for your projects.

CSS

CSS Animation Generator

Design custom CSS keyframe animations. Control duration, easing, and delay to bring your web elements to life.

CSS

CSS Border Radius Generator

Visually sculpt rounded corners for your elements. Create circles, pills, and organic shapes with advanced individual corner control.

CSS

CSS Box Shadow Generator

Generate complex CSS box-shadows visually. Adjust position, blur, spread, and color to create depth and elevation for your UI elements.