Runs locally
CSS clamp()
A clamp() declaration from three lengths.
Ctrl+Enter runs. Ctrl+Shift+Backspace clears.
Export and import are available after you sign in. Sign in
A clamp() declaration from three lengths. Runs in the browser. Nothing is uploaded.
About this tool
Make headings and spacing grow smoothly between a minimum and a maximum size. Enter the three lengths, for example 1rem, 4vw and 2.5rem, and copy the clamp() value.
How to use it
- 01
Enter the minimum length.
- 02
Enter the preferred, usually viewport-based, length.
- 03
Enter the maximum and copy the clamp() declaration.
FAQ
Frequently asked questions
What does clamp() do?
It uses the preferred value but never goes below the minimum or above the maximum.
Is clamp() supported everywhere?
Yes. All modern browsers support it.