← grid/T · TEXT & CODE/CSS clamp() Generatorlive · localpick another

CSS clamp() Generator

Generate fluid typography and spacing that scales between two viewport sizes

Presets
Parameters
Output Unit
Rootpx
Size Range (px)
px→rem
px→rem
Viewport Range (px)
px
px
Output
Fluid Scale Preview
320px1280px
Flat at 16px below 320pxFlat at 24px above 1280px
Generated clamp()
clamp(1rem, calc(0.8333rem + 0.8333vw), 1.5rem)
CSS Declaration
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 var--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 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