Choose the smallest and largest values you want to allow.
Local CSS value generator
Build a responsive CSS clamp value
Enter a minimum, maximum, and viewport range to generate a fluid CSS clamp() value for type, spacing, or layout.
* Everything runs in your browser. Values are calculated locally and never uploaded.
CSS ready
font-size: clamp(1rem, calc(0.2727rem + 3.6364vw), 3rem);Live preview
The calculation assumes a 16px root font size when converting pixels to rem.
QUICK GUIDE
A smoother range without media-query jumps
Set the viewport widths where the value should reach those bounds.
Paste the generated clamp() into font-size, padding, gap, width, or another CSS property.
Keep the bounds readable so the value stays useful on narrow and wide screens.
FAQ
CSS clamp questions
What does clamp() do?
It keeps a preferred fluid value between a minimum and maximum value.
What is the middle value?
ClampBox calculates a linear calc() expression in rem and vw that reaches your two pixel bounds at the selected viewport widths.
Does ClampBox add media queries?
No. The output is one CSS value and works with the browser's native clamp() function.