Create fluid body text
Set a 320px to 1280px viewport range and 16px to 20px font sizes to generate a clamp value for responsive reading text.
Design tools
CSS Clamp Generator
Generate fluid CSS clamp values for responsive typography, spacing, padding, and layout scales.
Fluid range
Use px inputs and copy rem-based CSS output.
CSS output
Clamp generated
font-size: clamp(1rem, calc(0.9167rem + 0.4167vw), 1.25rem);
Live preview
Fluid CSS values that stay readable across viewport sizes.
- Slope
- 0.4167vw
- Intercept
- 14.6667px
| Point | Viewport | Size |
|---|---|---|
| Min viewport | 320px | 16px |
| Midpoint | 800px | 18px |
| Max viewport | 1280px | 20px |
More design tools
Continue with nearby tools in the same workflow category.
About CSS clamp
CSS clamp lets a value grow between a minimum and maximum size as the viewport changes. It is useful for fluid type scales, spacing tokens, and layout values that should adapt without breakpoint jumps.
Common uses
- Create responsive font-size declarations
- Build spacing values between mobile and desktop widths
- Convert pixel design targets into rem-based CSS
- Preview the generated fluid value before copying it
Notes
Enter viewport and size targets in pixels. The generator outputs a rem-based clamp expression using the root font size you choose.
Examples
Build a spacing token
Generate a gap or padding value that scales between mobile and desktop layouts without adding another breakpoint.
FAQ
What does CSS clamp do?ShowHide
CSS clamp sets a minimum value, a preferred fluid value, and a maximum value. The browser uses the fluid value while keeping it inside the min and max limits.
Why does this generator output rem values?ShowHide
Rem values follow the root font size, which keeps typography and spacing friendlier to user zoom and accessibility settings.
Can I use clamp for spacing as well as font sizes?ShowHide
Yes. Clamp works for many CSS length properties, including font-size, padding, gap, margin, width, and layout tokens.
Related next tools
Use these nearby utilities when the current task is part of a larger debugging, writing, security, or site maintenance workflow.