CSS clamp() Generator

Generate fluid typography and spacing that scales smoothly between two viewport sizes

Presets

Parameters

Output Unit

Root font size

Size Range (px)

Min Size

px→rem

Max Size

px→rem

Viewport Range (px)

Min Viewport

Max Viewport

Fluid Scale Preview

Flat at 16px below 320px viewportFlat at 24px above 1280px viewport

Generated clamp()

clamp(1rem, calc(0.8333rem + 0.8333vw), 1.5rem)

CSS Declaration

CSS Property

CSSfont-size: clamp(1rem, calc(0.8333rem + 0.8333vw), 1.5rem);

SCSS var$fluid-font-size: clamp(1rem, calc(0.8333rem + 0.8333vw), 1.5rem);

CSS custom property--fluid-font-size: clamp(1rem, calc(0.8333rem + 0.8333vw), 1.5rem);

Math Breakdown

Slope

0.0083

(24 - 16) ÷ (1280 - 320)

Intercept

13.3333px

16 − slope × 320

Slope as vw

0.8333vw

slope × 100

Size at Common Viewports

320px

16.0px

1.000rem

375px

16.5px

1.029rem

480px

17.3px

1.083rem

768px

19.7px

1.233rem

1024px

21.9px

1.367rem

1280px

24.0px

1.500rem

1440px

24.0px

1.500rem

1920px

24.0px

1.500rem

DWG · T-CSS-CLAMP-GENERATOR100% client-side·⌘C copy · ESC → grid