Genfy
Español
📐

CSS clamp()

clamp() is a CSS function that returns a value bounded between a minimum and maximum, based on a preferred value that scales. It's the cornerstone of modern fluid typography.

Examples

  • font-size: clamp(1rem, 2.5vw, 3rem); — Fluid typography for headings
  • padding: clamp(1rem, 5vw, 3rem); — Responsive spacing in sections
  • width: clamp(300px, 80vw, 1200px); — Fluid container
  • gap: clamp(0.5rem, 2vw, 2rem); — Spacing in grid or flexbox
  • font-size: clamp(0.875rem, 0.8rem + 0.3vw, 1.125rem); — Adaptive paragraph text

FAQ

Does CSS clamp() work in all browsers?

Yes, clamp() has universal support since 2020: Chrome 79+, Firefox 75+, Safari 13.1+, Edge 79+. You don't need prefixes or fallbacks for modern browsers. If you must support IE11, use PostCSS with autoprefixer or manual fallbacks with media queries.

What's the difference between clamp(), min() and max()?

min() returns the smallest of the values, max() the largest, and clamp() bounds between two limits. Example: min(2rem, 5vw) always returns the smaller of those two. clamp(1rem, 5vw, 3rem) returns 5vw only if it's between 1rem and 3rem, otherwise returns the limit.

How do I calculate the correct values for clamp()?

Use a clamp() generator that automatically calculates the formula based on desired min and max sizes for specific viewports. The manual formula is complex: (MAX - MIN) / (VP_MAX - VP_MIN) * 100vw + adjustment value. Genfy's generator does this for you.

Related generators

⚙️ CSS clamp() Generator Generate the CSS clamp() function for responsive typography and sizing. Set min/max and viewport range, copy the code. 🌈 CSS gradient generator Build linear, radial and conic CSS gradients with live preview. Copy ready-to-paste code, multi-stop support and modern background styles.