Designer / CSS

CSS Clamp Generator

Generate fluid clamp() values for type and spacing, preview results across screen sizes, and copy production-ready CSS instantly. Tune type and spacing ranges, preview screen-size behavior, and copy clean `clamp()` output without spreadsheet math.

16-20px

Size range

360-1440

Viewport range

0.37vw

Fluid slope

17.51px

Tablet preview

Minimum size (px)Maximum size (px)Minimum viewport (px)Maximum viewport (px)

Token or variable namePreview text

Status

Loaded body text starter values

Live preview

Fluid type helps interfaces feel balanced from mobile to desktop.

CSS output

font-size: clamp(1rem, 0.917rem + 0.37vw, 1.25rem);

Math summary

Intercept: 14.667px

Slope: 0.37vw

Range: 1rem to 1.25rem

Reuse note

Great for fluid type, gaps, padding, and section spacing tokens.

Previewing values across breakpoints makes the result easier to trust than raw math alone.

Viewport samples

360px

16px

1rem

768px

17.51px

1.094rem

1280px

19.41px

1.213rem

1440px

20px

1.25rem