CSS clamp generator
Build a fluid font-size clamp() from min and max sizes and viewports.
Loading tool…
Recommended next step
Design and validate your interface
After using CSS clamp generator, continue with CSS Box Shadow Generator.
Continue this path
Tools selected to complete the same task.
Tool guide
CSS clamp generator: how it works
Practical information to understand the result and use this tool correctly.
About CSS clamp generator
clamp() locks a floor and a ceiling and lets the middle term scale with the viewport. The slope is (max − min) ÷ (max viewport − min viewport).
Sizes are converted to rem with the root you enter (16px by default) so the line respects user font scaling. The vw term stays in vw.
A minimum larger than the maximum, a zero or inverted viewport span, and a non-positive root are rejected. Empty fields do not invent a declaration.
How to use it
- 1Enter the minimum and maximum font size in pixels, and the viewport range where the type should scale.
- 2Set the root font size if it is not 16px.
- 3Copy the clamp() declaration. Nothing is uploaded.
Frequently asked questions
- What does 16px at 320px to 24px at 1200px produce?
- With a 16px root: font-size: clamp(1rem, 0.8182rem + 0.0568vw, 1.5rem); It is 16px at 320px wide and 24px at 1200px.
- Why rem instead of px in the clamp?
- rem follows the user's root font size. The vw coefficient is still derived from the pixel slope so the endpoints stay put.
- What if the minimum size is larger than the maximum?
- The tool rejects it. clamp() needs the floor at or below the ceiling, and the viewport span must be positive.