Fluid clamp() Calculator
Pick a min and max value, a min and max viewport width, and any CSS property — font-size, padding, gap, margin, width, height, and more — and get a single clamp() declaration that scales smoothly between breakpoints with zero media queries. Drag the viewport slider to preview the computed value at any width before you ship it.
The value scales linearly between these two viewport widths, and stays clamped flat outside them.
Drag the slider above to simulate different viewport widths.
How to use
Choose a property
font-size, padding, gap, margin, width, height, line-height, border-radius, or letter-spacing.
Set the value range
The smallest and largest values you want, in pixels.
Set the viewport range
The screen widths between which the value should scale fluidly.
Preview & copy
Drag the viewport slider to check the computed value, then copy the clamp() declaration.