Utility · CSS unit tool
CSS clamp() builder
`clamp(MIN, PREFERRED, MAX)` returns the preferred value but never below MIN or above MAX. A `calc()`-based preferred term like `1rem + 2vw` makes the value scale smoothly with the viewport—fluid sizing without JavaScript or media queries.
font-size: clamp(1rem, 2vw + 0.75rem, 2rem);
Keyboard tip: press Tab or Shift+Tab to switch fields.
How clamp() works
The function evaluates the middle (preferred) value and then clamps it: if it falls below MIN it returns MIN, if it rises above MAX it returns MAX, otherwise it returns the preferred value unchanged.
The power comes from a viewport-relative preferred value. `clamp(1rem, 0.75rem + 1.8vw, 2rem)` starts at 1rem on small screens, grows with the viewport, and locks at 2rem on large ones.
A reliable fluid pattern
Keep MIN and MAX in rem so they respect user font settings, and put the scaling in the preferred term: `clamp(MINrem, INTERCEPTrem + SLOPEvw, MAXrem)`.
Always validate at the extremes—320px and 1440px are good checkpoints—to confirm text stays readable and never overflows its line.
Beyond typography
clamp() is just as useful for fluid spacing: section padding, grid gaps, and container widths all benefit from a bounded, viewport-aware value.
Because it is pure CSS, clamp() has zero runtime cost and works inside custom properties, making it ideal for design-token systems.
Copy-ready examples
h2 {
font-size: clamp(1.25rem, 0.8rem + 1.8vw, 2rem);
}section {
padding-block: clamp(2rem, 5vw, 5rem);
}Frequently asked questions
- Do I need media queries with clamp()?
- Usually no. A single clamp() with a viewport-relative middle term replaces several breakpoints for type and spacing.
- Should the min and max be in rem or px?
- Prefer rem for the bounds so they respect user zoom and root font-size; the scaling term can mix rem and vw.
- Is css clamp() builder free to use?
- Yes. UnitCraft calculators are free and run entirely in your browser.
- Does UnitCraft send my input values to a server?
- No. Calculator inputs are processed locally in the browser tab.
- Can I copy the generated CSS output?
- Yes. Each tool provides copy-ready snippets so you can paste values directly into code.