Free online tool

CSS Clamp Generator

Generate fluid CSS sizes with clamp() and preview viewport values

Size range

CSS property

Minimum size (px)

Maximum size (px)

Minimum viewport (px)

Maximum viewport (px)

Output

Fixed-value unit

Root font size (px)

The preferred term combines a fixed intercept with vw. Values are clamped below and above the selected viewport range.

Generated CSS

Preview virtual viewport:

Fluid responsive size

Viewport	Calculated value

Generate fluid CSS with clamp()

Create a linear responsive value between a minimum and maximum viewport width. Below the minimum viewport the first value is used; above the maximum viewport the last value is used.

Using rem for the fixed parts of fluid typography respects changes to the browser’s root font size. Test zoom and large-text settings in the final design, because highly viewport-dependent text can still create accessibility problems.