Skip to content
Briefed
Tools

Developer

CSS clamp generator

Generate a clamp() value that grows in a straight line between two sizes as the viewport grows between two widths.

It runs in your browser. What you enter stays on this device.

The size at the narrow viewport.

The size at the wide viewport.

Examples

Load a sample into the form, then run it.

How to use it

  1. 1Enter the small size and the large size.
  2. 2Enter the viewport widths, in pixels, where those sizes should apply.
  3. 3Choose rem or px.
  4. 4Choose Generate and copy the clamp() value.

When it helps

  • Fluid heading size.
  • Fluid spacing between a phone width and a desktop width.

Good to know

  • The middle term is linear. It does not follow a type scale.
  • Viewport widths are pixels. The size unit applies to the minimum, preferred intercept, and maximum.
  • Nothing is uploaded.

Questions

Where do I paste the result?

Use it as a CSS length, for example font-size or padding. The page does not change your stylesheet.

Related tools

  • JSON formatter

    JSON formatter

    Check JSON, then format or minify it in the browser.

    Developer