CSS clamp() Generator
Generate responsive clamp() code from size and viewport ranges for fluid typography—no media queries needed. Everything runs in your browser.
- clamp() value
- clamp(1rem, 0.884vw + 0.7928rem, 1.5rem)
- Usage
- font-size: clamp(1rem, 0.884vw + 0.7928rem, 1.5rem);
FAQ
How does clamp() work?
clamp(min, preferred, max) uses the preferred value bounded by min/max. A 'vw + rem' linear expression makes size scale with viewport width.
How are the vw slope and rem intercept derived?
It's the line through (minViewport, minSize) and (maxViewport, maxSize): slope × 100 becomes the vw factor; the intercept converts to rem at 16px.
Why rem instead of px?
rem respects the user's browser font-size setting. Pure vw ignores zoom and accessibility preferences, which can violate WCAG.
Related tools
Convert between px, rem, em, pt, and % based on a root font size. Handy for responsive typography. Everything runs in your browser.
Tune offset, blur, spread, color, and opacity to craft a CSS box-shadow with a live preview. Supports inset shadows. Everything runs in your browser.
Build CSS linear and radial gradients from two colors and an angle, with live preview and midpoint color info. Everything runs in your browser.
Compute the contrast ratio between text and background colors and check WCAG 2.x AA/AAA accessibility compliance. Everything runs in your browser.
Convert between HEX, RGB and HSL color codes with a live preview.
Generate a HEX palette of tints and shades from a base color—useful for design-system color scales. Everything runs in your browser.