Width Clamp Generator

What is a CSS Width Clamp()?

The clamp() function lets an element's width scale fluidly between a minimum and maximum value based on the viewport size, instead of jumping between fixed sizes at media query breakpoints.

Example:

width: clamp(320px, calc(203.636px + 36.364vw), 640px);

In this example the element never shrinks below 320px or grows past 640px, scaling smoothly in between. This tool is part of the free ClampGenerator toolkit for building fluid, responsive interfaces without media queries.

Width, Min-Width & Max-Width Clamp Generator

Easily generate fluid clamp() values for element width—perfect for cards, sections, images, or any container that needs to scale gracefully across screen sizes.

• width — a self-contained fluid size.
• min-width — a floor for flex/grid items or percentage-based widths.
• max-width — a ceiling so a fluid or percentage-based element never grows too wide.

👉 Switch between them using the property buttons above the calculator.

Common Use Cases for Width Clamp()

• ✅ Content containers that stay readable on mobile and comfortable on desktop
• ✅ Cards and grid items that resize without extra breakpoints
• ✅ Hero images and media that scale proportionally with the layout
• ✅ Modals and dialogs that avoid feeling cramped or oversized

Live Preview for Width, Min-Width & Max-Width

Whichever of the three you pick, a live preview appears below the inputs with a slider that simulates a viewport width across your configured min/max range—no need to actually resize your browser. The dashed frame represents the simulated viewport and the solid bar inside represents the resulting value, both scaled by the same factor so the proportion on screen is accurate. A rough device label (📱 Mobile / 📲 Tablet / 🖥️ Desktop) shows next to the slider as a guide, based on common breakpoints—your own configured min/max viewport values still drive the actual calculation.

Export as CSS Variable, SCSS, or Tailwind

The generated code isn't limited to a plain CSS declaration. Choose an output format above the code box:

• CSS — width: clamp(...);
• CSS Variable — --card-width: clamp(...);
• SCSS — $card-width: clamp(...);
• Tailwind — 'card-width': 'clamp(...)', ready to paste into tailwind.config.js

Edit the name field to control the variable or config key used—no need to hand-edit the copied snippet afterward.

Using Width clamp() Carefully: 6 Things to Watch For

clamp() removes the need for media queries, but it's still real CSS with real edge cases. A few things worth checking before you ship a width clamp():

1. Avoid 100vw as your max viewport-relative unit on full-bleed elements.vw includes the scrollbar's width, so width: clamp(..., 100vw, ...) on a block that reaches the edge can trigger a horizontal scrollbar. Cap the max at something like 98vw, or size against a wrapper instead of the raw viewport.
2. width only affects block-level and replaced elements. A plain <span> or other inline element ignores width entirely—set display: inline-block, block, flex, or similar first.
3. Check box-sizing. With the default content-box, padding and border are added on top of your clamp() value, so the element ends up wider than expected. Most resets already apply box-sizing: border-box globally—confirm yours does if the rendered size looks off.
4. Flex and grid items need an explicit min-width. Flex/grid items default to min-width: auto, which can silently override a width clamp() and cause overflow with long unbroken text or images. Pair your width clamp() with a min-width clamp() (or min-width: 0) on flex/grid children.
5. Prefer inline-size over width for logical, writing-mode-aware layouts. If the design needs to work in RTL languages or vertical writing modes, swap the property to inline-size (see the MDN docs)—the clamp() value itself doesn't need to change. Try the dedicated Inline-Size Clamp Generator to generate it directly.
6. Provide a fallback for very old browsers. clamp() has near-universal support today, but if you must support something ancient (pre-2020 Safari/Edge), declare a plain width value before the clamp() line—CSS uses the last valid declaration, so modern browsers will still pick up the clamp() one and older browsers fall back gracefully.

Related Tools

• Inline-Size Clamp Generator (logical width)
• Layout & Spacing Clamp Generator (height, margin, padding, gap)
• Font Size - Typescale Clamp Calculator
• ClampGenerator Homepage

Guides

• Layout size with clamp() - complete guide with examples
• css clamp() - how to use?