Useful Hacks

CSS Clamp() Generator

Generate a fluid clamp() value for responsive typography.

Calculated locally in your browser.

Overview

Generates a CSS clamp() value that scales a size fluidly between a minimum and maximum, based on viewport width — the standard technique for fluid typography without media queries.

How to use it

  1. 1Set the minimum and maximum size.
  2. 2Set the viewport width range they apply across.
  3. 3Copy the generated clamp() value.

Formula

clamp()

clamp(MIN, intercept + slope·vw, MAX)

Linearly interpolates between MIN at the minimum viewport and MAX at the maximum viewport, clamped outside that range.

Related tools

All developer tools

Search tools

Search for any tool by name, category or keyword