CSS Clamp() Calculator
Generate a fluid clamp() value that scales smoothly between a min and max size across a viewport range.
Last updated
How to make a fluid clamp() value
- Enter the smallest and largest viewport widths, in pixels.
- Enter the size you want at each, in rem or px.
- Click Copy value, and drag the live preview to check it.
About this tool
The generated value is a clamp(MIN, PREFERRED, MAX) expression: below the min viewport width it holds at the min size, above the max viewport width it holds at the max size, and in between it scales linearly using a calculated vw-based formula — the same slope-and-intercept method used by most fluid-typography calculators. It works for any size property, not just font-size: padding, margin, gap, and width all accept it.
The preview below is a real <iframe>, not a resized div — vw units are always relative to the actual browser viewport, so a container alone can't demonstrate them accurately, but an iframe has its own real viewport that changes as you resize it. Nothing you enter here is sent to a server; the entire tool runs as JavaScript in your browser tab.
Questions about CSS clamp()
What does clamp() do?
clamp(MIN, PREFERRED, MAX) uses the preferred value but never goes below the minimum or above the maximum. With a vw-based preferred value, sizes scale smoothly with the screen.
Why use clamp() for font sizes?
Text grows smoothly from phone to desktop without a pile of media queries, and stays within limits you choose.
Should I use rem or px?
rem, so text still respects the visitor’s browser font-size setting. That matters for accessibility.
Can I use clamp() for spacing?
Yes. Padding, margin, gap and widths all accept it.