Toolnoza

DEVELOPER TOOL

CSS Clamp Calculator & Generator

Generate fluid font-size CSS between two viewport widths with a live preview.

CSS Clamp Calculator & Generator

FREE ONLINE TOOL

Preview text

24 px

Linear interpolation; rem values assume the entered root size. Test browser zoom and accessibility in your own layout.

STEP BY STEP

How to use css clamp calculator & generator

  1. Review the preview or calculated result.
  2. Check the assumptions before using the output.

IN PRACTICE

Example

16–32 px over 320–1280 px at a 16 px root: clamp(1rem, 0.666667rem + 1.666667vw, 2rem).

GOOD TO KNOW

How does it work?

Linear interpolation; rem values assume the entered root size. Test browser zoom and accessibility in your own layout.

+

Related tools

PX to REM ConverterOpen toolPX to VW ConverterOpen toolHTTP Status Codes — Searchable ReferenceOpen toolDecimal to Hex ConverterOpen toolJSON to CSV ConverterOpen toolHTML Entity Encoder & DecoderOpen tool

Method

Set minimum and maximum font sizes, viewport widths and root font size.

Example

16–32 px over 320–1280 px at a 16 px root: clamp(1rem, 0.666667rem + 1.666667vw, 2rem).

Limits

Linear interpolation; rem values assume the entered root size. Test browser zoom and accessibility in your own layout.

How does it work?

Set minimum and maximum font sizes, viewport widths and root font size.

What should I check?

Linear interpolation; rem values assume the entered root size. Test browser zoom and accessibility in your own layout.