References

Beginner-friendly references for web development, with live, editable examples.

The CSS clamp() function

Function CSS All modern browsers Updated
Quick answer

The CSS clamp(MIN, PREFERRED, MAX) function returns the preferred value but never lets it drop below MIN or rise above MAX. With a viewport-based preferred value like clamp(1rem, 2.5vw, 1.5rem) it gives you fluid, responsive sizing — text or spacing that scales with the screen — without a single media query.

Overview

clamp() takes three values — a minimum, a preferred value, and a maximum — and returns the preferred one, bounded by the other two. It is exactly equivalent to max(MIN, min(PREFERRED, MAX)), just far easier to read.

The magic happens when the preferred value is viewport-relative. clamp(1.75rem, 4vw, 3rem) reads as "never smaller than 1.75rem, never larger than 3rem, and 4% of the viewport width in between." That single line produces a heading that grows smoothly from phone to desktop and stops at sensible limits — fluid typography that used to take several media queries.

It is not just for font size. Fluid spacing (padding: clamp(1rem, 5vw, 4rem)), fluid widths and fluid gaps all work the same way. The min and max are your guardrails; the middle value is how it scales between them.

Syntax

/* fluid heading, no media query */
h1 {
  font-size: clamp(1.75rem, 4vw, 3rem);
}

Example

Live example 
<style>
  .fluid {
    font-size: clamp(1.25rem, 6vw, 2.75rem);
    font-weight: 800;
    font-family: system-ui, sans-serif;
    color: #0f172a;
    margin: 0;
  }
</style>
<p class="fluid">I scale with the screen, between 1.25rem and 2.75rem.</p>

Best practices

  • Use it for fluid headings and spacing instead of stacking media queries — it stays smooth at every width.
  • Keep the minimum at a comfortably readable size so small screens never get tiny text.
  • Express the bounds in rem so the result still scales when a user zooms or changes their base font size.
  • Mix a relative preferred value (like vw) with absolute min and max for the smoothest, safest scaling.

Accessibility

Fluid sizing must not defeat the user's ability to enlarge text. If you size type with clamp(), express the minimum and maximum in rem rather than px so the whole range still responds to browser zoom and to a larger default font size. A clamp built entirely from viewport units can lock text to the screen size and ignore those preferences.

Set the minimum to a genuinely readable value — there is no benefit to text that scales down below comfort on a small screen. The lower bound is your accessibility floor.

Frequently asked questions

How do I make font size responsive without media queries?
Use clamp(), e.g. font-size: clamp(1rem, 2.5vw, 1.5rem). The size scales with the viewport between a minimum and maximum.
What do the three values in clamp() mean?
Minimum, preferred and maximum. The function returns the preferred value, but never below the minimum or above the maximum.
What is the difference between clamp() and min()/max()?
clamp(a, b, c) is shorthand for max(a, min(b, c)) — it sets both a floor and a ceiling at once, where min() and max() each handle one bound.
Can I use clamp() for spacing, not just text?
Yes. It works for padding, margins, gaps and widths — anywhere a length is accepted, e.g. padding: clamp(1rem, 5vw, 4rem).
calc() hsl()