Choose the smallest and largest values you want to allow.
로컬 CSS 값 생성기
반응형 CSS clamp 값을 만드세요
최소·최대값과 viewport 범위를 입력해 글자·간격·레이아웃에 쓸 유동적인 CSS clamp() 값을 생성하세요.
* 모든 처리는 브라우저에서 진행됩니다. 값은 로컬에서 계산되며 업로드되지 않습니다.
CSS 준비 완료
font-size: clamp(1rem, calc(0.2727rem + 3.6364vw), 3rem);실시간 미리보기
The calculation assumes a 16px root font size when converting pixels to rem.
QUICK GUIDE
미디어 쿼리 점프 없이 부드러운 범위
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.