CSS Clamp Generator
Build responsive clamp() values for typography, spacing, widths, and border radius. Set a minimum size,
maximum size, and viewport range — then copy ready-to-paste CSS instantly.
Copy a valid CSS declaration in one click.
Works for mobile-first and desktop scaling ranges.
Choose the output unit that matches your design system.
Great for headings, gaps, padding, widths, and corner radius.
Popular presets
Start with a common fluid pattern.
Generator inputs
Choose the CSS property, output unit, and viewport range you want to scale across.
Fluid typography for headings, body text, and UI labels.
Generated clamp()
Copy the expression only or the full CSS declaration.
clamp(16px, 10.6667px + 1.6667vw, 32px) font-size: clamp(16px, 10.6667px + 1.6667vw, 32px); .demo {
font-size: clamp(16px, 10.6667px + 1.6667vw, 32px);
}Viewport samples
See the calculated size at common breakpoints. Values clamp below and above your configured viewport range.
This sample applies your generated declaration directly to the heading element.
How the math works
clamp(min, preferred, max) lets the browser scale values fluidly while keeping hard limits.
clamp(16px, 10.6667px + 1.6667vw, 32px)font-size = 16px + (16px / 960px) * (100vw - 320px)Clamp best practices
1. Pick realistic min and max values
Start from real design tokens or Figma values rather than guessing arbitrary numbers.
2. Use rem for design systems
rem-based output often works better when your typography and spacing already depend on root font size.
3. Keep viewport ranges intentional
A 320px to 1280px range is a good default, but align it with your actual product breakpoints.
4. Clamp more than text
Fluid spacing, width, and radius values can make interfaces feel more polished without many media queries.