About This Tool
CSS Clamp Generator combines a minimum, a viewport-dependent preferred value, and a maximum in CSS clamp() so sizes change within sensible limits. The page provides a live text preview and clear CSS output.
How to Use
- Choose a generation mode and enter the required sizes and units.
- Make sure the minimum does not exceed the maximum.
- Check the output and text preview. Fluid mode also needs a viewport range with increasing widths.
- Copy CSS and check the effect at different viewport widths in your project.
Examples
- clamp(16px, 2vw, 32px) limits the font size to 16–32px.
- For 16→32px across a 320→1200px viewport range, the fluid formula yields 16px and 32px at the respective endpoints.
- Outside the specified viewport range, the size stays at the minimum or maximum limit.
font-size: clamp(16px, 2vw, 32px);
/* 16px at 320px viewport; 32px at 1200px viewport */
font-size: clamp(16px, calc(10.181818px + 1.818182vw), 32px);How It Works & CSS Details
clamp(min, preferred, max) uses the preferred value within the minimum and maximum limits. Fluid mode calculates slope = (maxSize − minSize) / (maxViewport − minViewport) and intercept = minSize − slope × minViewport, giving a preferred value of calc(intercept px + slope × 100vw).
Common Uses
- Create responsive headings with upper and lower size limits.
- Connect two font sizes with linear interpolation.
- Reduce media queries used only to adjust font sizes.
Privacy
All input processing, calculations, CSS generation, and previews run in your browser. Your content is never uploaded. No backend, database, online API, or third-party CDN is used, and your input is not saved automatically.
FAQ
What is CSS clamp()?
clamp() is a CSS math function that constrains a preferred value between a lower and upper limit.
What do the three values represent?
They are the minimum, preferred, and maximum values, in that order. This tool validates sizes and units and rejects reversed limits.
Why is it useful for responsive type?
The preferred value can use vw to scale with the viewport, while the limits keep text from becoming too small or too large.
Why does Fluid mode need two different viewport widths?
The two widths define the linear interpolation range. The maximum must exceed the minimum to prevent division by zero or a reversed range.
Which browsers support clamp()?
Modern mainstream browsers widely support it. If your project needs older browsers, provide a fixed size before the clamp() declaration as a fallback.