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.
font-size, padding, gap, margin, width, height, line-height, border-radius, or letter-spacing.
The smallest and largest values you want, in pixels.
The screen widths between which the value should scale fluidly.
Drag the viewport slider to check the computed value, then copy the clamp() declaration.
