CSS Clamp Generator

Generate fluid clamp() CSS that scales any value smoothly between two viewport widths — with live preview.

Tool input is processed locally in your browser and is not submitted to CodeNimbleTools. Avoid pasting production secrets into any device or website you do not fully trust.

Min size px Max size px Min viewport px Max viewport px Unit Root font size px

Generated clamp()

Live preview — resize your window

The nimble brown fox

About this tool

clamp() lets one line of CSS scale typography (or spacing) smoothly from phone to desktop — once you've done the slope math. This generator does it for you: set the minimum and maximum size plus the viewport range, and get a precise clamp() expression in rem or px.

A live preview text resizes with your window so you can feel the result before shipping it.

How to use it

Enter min/max sizes in px and the viewport range they map to.
Choose rem (recommended for accessibility) or px output.
Copy the generated clamp() — it works for font-size, padding, gap, anything.
Resize your browser to watch the live preview scale.

Useful ways to apply it

Fluid headings that never need media-query breakpoints.
Responsive section padding that scales with the screen.
Consistent type scaling across a design system.
Replacing stacks of font-size media queries with one line.

Worked example

Example input

18px at 360px viewport → 40px at 1280px viewport

Expected output

font-size: clamp(1.125rem, 0.587rem + 2.3913vw, 2.5rem);

Edge cases to check

The max viewport must be larger than the min viewport.
Equal min/max sizes produce a fixed value rather than a fluid slope.
A fluid formula does not replace accessibility testing at browser zoom and user font-size settings.

Known limitations

The formula linearly interpolates between two chosen viewport points. It does not decide which min/max sizes are appropriate for your design.

How this tool was reviewed

Reviewed by substituting the boundary viewport widths back into the generated linear equation and testing fixed/equal-size cases.

Last reviewed: September 3, 2026 · Maintainer: William

Standards and technical references

See the site-wide testing methodology for fixture categories, privacy checks and correction policy.

Frequently asked questions

How is the middle value calculated?

Linear interpolation: slope = (max−min)/(vmax−vmin), then intercept + slope×100vw. The clamp bounds guarantee you never go below min or above max.

Why prefer rem output?

rem respects the user's browser font-size setting, keeping fluid type accessible. The vw component is unaffected either way.

Can I use this for spacing, not just text?

Absolutely — the expression is valid for any length property: padding, margin, gap, border-radius and more.

Privacy

Tool input is processed locally in your browser and is not submitted to CodeNimbleTools. Avoid pasting production secrets into any device or website you do not fully trust.