CSS clamp() Calculator

Calculate a CSS clamp() value for a fluid text or spacing size that scales proportionally between a minimum and a maximum viewport width.

Example:

How it works

The CSS clamp(min, preferred, max) function lets you define a fluid size that varies linearly with the width of the window, while staying bounded between a minimum and a maximum — ideal for responsive text without media queries. The tool automatically calculates the slope and intercept in vw and rem units.

Why use clamp() instead of media queries?

clamp() offers a continuous, fluid transition between sizes rather than abrupt jumps at fixed breakpoints, giving a more natural result across all intermediate screen widths.

Why are the values expressed in rem rather than px?

Using rem keeps the size proportional if the user changes their browser's default font size, which improves accessibility compared to fixed pixel values.

100% local processing: the calculation happens entirely in your browser via WebAssembly, with no data sent to a server.