CSS Clamp Generator
Generate CSS clamp() values for fluid typography and responsive spacing. Set min and max sizes with viewport breakpoints, preview the scaling curve, and copy the CSS.
At minimum viewport width
At maximum viewport width
E.g. 375 (mobile)
E.g. 1440 (desktop)
font-size: clamp(1rem, 0.8rem + 0.6vw, 1.5rem);
About this tool
The CSS Clamp Generator computes a fluid clamp() expression so your typography, spacing, and sizing scale smoothly between two viewport widths — no manual math.
Enter a minimum and maximum size (in px or rem), the viewport breakpoints they correspond to (e.g. 375 px mobile → 1440 px desktop), and the tool outputs a production-ready font-size: clamp(…) rule. The interactive curve shows the exact size at every viewport width, and the "preview viewport" field lets you check a specific breakpoint.
Examples:
• 16 px (body) at 375 px → 20 px at 1440 px → clamp(1rem, 0.696rem + 0.652vw, 1.25rem)
• 28 px (H1) at 375 px → 48 px at 1440 px → clamp(1.75rem, 1.043rem + 1.173vw, 3rem)
FAQ
What is clamp() in CSS? ›
clamp(MIN, PREFERRED, MAX) is a CSS function that clamps a value between a minimum and maximum, growing smoothly in between. For fluid typography, the preferred value is a calc() expression that scales with the viewport — giving you type that grows gradually instead of jumping at breakpoints.
How is the formula computed? ›
The tool calculates the slope (rate of change per viewport pixel) from your min/max sizes and breakpoints. The output formula clamps the value at the minimum below your lower breakpoint, scales linearly between breakpoints, and stops at the maximum above the upper breakpoint. No media queries needed.
Should I use px or rem? ›
rem is recommended because it respects the user's browser font-size settings (accessibility). If you use px, set root font-size to 16 (the browser default). The tool outputs in both — pick what fits your project.
What viewport breakpoints should I use? ›
A common pairing is 375px (small mobile) and 1440px (large desktop). For a narrower range, try 768px (tablet) to 1280px (laptop). The best choice depends on your design's actual responsive boundaries.