CSS Clamp Generator

How clamp() creates responsive sizing between bounds

The clamp() CSS function returns one of three values: it returns the middle value (a linear equation) when that value falls between a minimum and maximum, and returns the minimum or maximum only when the equation undershoots or overshoots those bounds. Responsive design often scales a property (like font size) gradually as the viewport width changes, without jumping at media query breakpoints. The generator translates minimum and maximum pixel values at specified viewport boundaries into a clamp() expression that scales smoothly across a range.

The tool requires five inputs: minimum value in pixels (the smallest size at the narrow viewport), maximum value in pixels (the largest size at the wide viewport), minimum viewport width in pixels (the narrow breakpoint where scaling begins), maximum viewport width in pixels (the wide breakpoint where scaling stops), and root font size in pixels (typically 16, used to convert pixel outputs to rem units). The minimum viewport must be narrower than the maximum, minimum value must not exceed maximum value, and root font size must be positive. The CSS output converts pixel values to rem units divided by the root and produces a linear equation in viewport width (vw) units.

Computing clamp() with defaults: 16–32 px across 320–1280 px viewports

At the 320-pixel minimum viewport, the middle term resolves like this: 1.6667vw is 1.6667% of 320 pixels, which is 5.3333 pixels, and 0.6667rem at a 16-pixel root is 10.6667 pixels. Their sum is 16 pixels, matching the minimum bound exactly. At the 1280-pixel maximum viewport, 1.6667vw becomes 1.6667% of 1,280 pixels, or 21.3333 pixels, and adding the same 10.6667-pixel rem term gives 32 pixels, matching the maximum. Between these breakpoints, the size scales linearly.

The rem conversion divides pixel values by the root (16 by default), allowing designers to work in absolute pixels during tool input but output responsive, scalable CSS that respects user font-size preferences. The vw unit is 1% of the viewport width: at 1000px width, 1vw = 10px. The slope 1.6667vw means the size increases by approximately 1.67 pixels for every 100 pixels of viewport width gained, producing a gentle, continuous scaling curve.

Practical applications for typography and spacing

Heading font sizes often benefit from clamp() scaling: a heading that is 24 pixels on mobile and 48 pixels on desktop can use a clamp() expression to avoid static breakpoints. The tool generates a single formula that handles the entire range, eliminating the need for multiple media queries. Similarly, spacing around elements (margins, gaps, padding) can scale smoothly with viewport width, maintaining proportional layouts across all sizes. Line length (measure) for readable text typically targets 45–75 characters; clamp() allows font size and container width to scale in concert, preserving readability across devices.

Edge cases arise when the desired size range conflicts with viewport bounds. If a 16-pixel minimum is required but the minimum viewport is only 300 pixels and scaling must stop at 1920 pixels, the clamp() formula may produce a larger-than-desired intermediate size at the 1920-pixel wide boundary if the slope is steep. Always verify the computed sizes at several viewport widths to ensure the formula meets design intent.

Common responsive sizing scenarios and their formulas

• Mobile-to-desktop heading: 24px at a 320px viewport up to 48px at 1280px, root 16px, yields clamp(1.5rem, 1rem + 2.5vw, 3rem), scaling headings smoothly across all devices.
• Flexible body text: 14px at 320px up to 18px at 1280px, root 16px, produces clamp(0.875rem, 0.7917rem + 0.4167vw, 1.125rem), maintaining readability without jarring size jumps.
• Fluid spacing: 8px at 320px up to 24px at 1280px, root 16px, generates clamp(0.5rem, 0.1667rem + 1.6667vw, 1.5rem), scaling gaps and margins proportionally with the viewport.
• Large display text: 32px at a 640px viewport up to 80px at 1920px, root 16px, creates clamp(2rem, 0.5rem + 3.75vw, 5rem), for hero titles that stay readable on both small and large screens.
• Subtle scaling: 16px at 320px up to 20px at 1280px, root 16px, outputs clamp(1rem, 0.9167rem + 0.4167vw, 1.25rem), applying minimal but continuous size adjustment.

Frequently asked questions

Related tools