CSS clamp() Generator
Fluid font sizes and spacing that scale smoothly between two viewport widths — no media queries
Generated value
font-size: clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem);Below 320px it stays at 16px; above 1280px it caps at 24px; in between it scales linearly with the viewport.
How it works
- •
clamp(MIN, PREFERRED, MAX)returns PREFERRED, bounded by MIN and MAX - • The preferred value is a line: y-intercept + slope·vw
- • slope = (maxSize − minSize) / (maxVw − minVw)
- • Using rem for the fixed part keeps it responsive to user font-size settings
More Design & Image Tools
Image Resizer
Resize images to exact dimensions or social media presets with format and quality control.
Gradient Generator
Build CSS linear, radial, and conic gradients visually with live preview and one-click copy.
Placeholder Image Generator
Generate placeholder images with custom dimensions, colors, and text. Export as PNG, SVG, HTML, or Markdown.