CSS & Design
CSS clamp() Generator
Build a fluid clamp() value for responsive type and spacing.
Free foreverRuns in your browserNo sign-up
font-size: clamp(1rem, 0.6667rem + 1.6667vw, 2rem);Fluid preview: this text scales with the viewport width.
clamp(min, preferred, max) keeps a size fluid between two viewport widths, so type and spacing scale smoothly without media queries.
About the CSS clamp() Generator
clamp() lets a size grow fluidly between two viewport widths without media queries, which is perfect for responsive typography and spacing.
Enter the minimum and maximum sizes and the viewport range, and this tool works out the clamp() value with the correct rem and vw parts.
A live preview shows the text scaling as you change the numbers.
Key features
- Min and max size and viewport inputs
- Outputs a ready-to-use clamp() value
- Live fluid preview
- rem-based output for accessibility
How to use
- 1Enter the min and max size in pixels.
- 2Enter the min and max viewport widths.
- 3Copy the generated clamp() value.
Examples
Fluid heading
Input:
16-32px over 320-1280pxOutput:
clamp(1rem, 0.727rem + 1.25vw, 2rem)Font size grows from 16 px to 32 px as the viewport widens.
Frequently asked questions
- Why use rem in the output?
- rem respects the user's root font size, so text still scales if they increase their browser's default size. The pixel inputs are converted to rem for you.
- What are good viewport values?
- A common range is 320 px (small phones) to 1280 px (laptops), but match it to your design's breakpoints.
- Does clamp() need media queries?
- No. That is the point: one clamp() value scales smoothly across the range, replacing several media queries.