CSS clamp() Generator help

Make a size that scales smoothly between two screen widths.

Steps

  1. Enter the smallest size, the largest size, and the viewport range they map between.
  2. Choose rem or px for the fixed parts.
  3. Copy the clamp(). The table shows the resolved size at a few common widths.

The maths

The middle term is a straight line through (minVw, minSize) and (maxVw, maxSize): a vw slope plus a fixed offset. clamp() holds it at the min below the range and the max above it.

Everything runs in your browser. Nothing you enter or drop is uploaded.

Back to CSS clamp() Generator