CSS Clamp Generator
Generate a CSS clamp() value that scales a font size or spacing smoothly between two viewport widths, in rem so it still respects the reader's font size.
Free · No sign-up · Your inputs stay in your browser
Input
Generate fluid sizes with CSS clamp()
Output
CSS
54 characters
| Viewport | Size |
|---|---|
| 320px | 18.0px |
| 375px | 18.0px |
| 768px | 24.1px |
| 1024px | 28.0px |
| 1280px | 32.0px |
| 1440px | 32.0px |
| 1920px | 32.0px |
The size grows linearly between the two viewport widths and stays fixed outside them. Keeping the minimum and maximum in rem means a reader who raises their browser's font size still gets larger text; a size made only of vw would ignore that setting, which WCAG 1.4.4 (resize text) counts as a failure.
Runs in this browser. Nothing you paste is sent to a server.
About this tool
Method, assumptions, practical next steps, and limits.
How the formula works
The preferred value is intercept + slope × 100vw, a straight line through the two points you set; clamp() stops it from going below the minimum or above the maximum. The function is defined in CSS Values Level 4. One clamp per type step replaces a stack of media queries.
Accessibility
A size written only in vw does not change when a reader zooms text, which fails WCAG's resize text criterion. Keeping the minimum, maximum and intercept in rem means the browser font setting still scales the result.