ClampGenerator nviewsWEB LogoClampGenerator nviewsWEB Logo

You are using "inline-size" clamp generator

The logical, writing-mode-aware equivalent of width — same clamp() math, adapts automatically under RTL or vertical writing modes.

Input Unit
Layout Property <px>
?
Fluid Range
Viewport Unit
?
Viewport Size <px>
?
Property Size <px>
?
Output
Output Unit

CSS clamp Generated Code to copy!

CSS
inline-size: clamp(320px, calc(182.857px + 38.095vw), 640px);

Live inline-size CSS Clamp() Preview

Drag the slider to simulate a viewport width between 360px and 1200px. The dashed frame is the simulated viewport (to scale); the solid bar's width is the resulting value, in the same proportion.

Simulated viewport width: 360px — 📱 Mobile (approx.)
?
📱 Mobile viewport: 360pxinline-size: 320px

Just need a plain clamp() value without picking a property? Try the simpler ClampCalculator.

What is CSS inline-size?

inline-size is a logical CSS property — in the default horizontal, left-to-right writing mode it behaves exactly like width, but it's defined relative to the text flow (the "inline" axis) rather than a fixed physical direction. That means the same clamp() value keeps working correctly if the writing mode or text direction changes.

Example:

inline-size: clamp(320px, calc(203.636px + 36.364vw), 640px);

Same fluid scaling as a width clamp(), just expressed with the logical property name.

inline-size vs. width: When to Use Which

  • ✅ Use inline-size for components that need to work correctly under RTL languages (Arabic, Hebrew) or vertical writing modes.
  • ✅ Use inline-size for design-system components meant to be direction-agnostic by default.
  • ✅ width is fine when the layout is always horizontal, left-to-right, and RTL support isn't a requirement.
  • ✅ The clamp() math is identical either way — only the property name changes.

inline-size, min-inline-size & max-inline-size

  • inline-size — a self-contained fluid size along the inline axis.
  • min-inline-size — a floor for flex/grid items or percentage-based sizes.
  • max-inline-size — a ceiling so a fluid or percentage-based element never grows too wide.

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

Live Preview

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.

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 — inline-size: clamp(...);
  • CSS Variable — --card-inline-size: clamp(...);
  • SCSS — $card-inline-size: clamp(...);
  • Tailwind — 'card-inline-size': 'clamp(...)', ready to paste into tailwind.config.js

Using inline-size Carefully

  1. Don't mix inline-size and width on the same element. Whichever declaration comes last in the cascade wins — pick one property per axis to avoid confusing overrides.
  2. It only affects block-level and replaced elements, exactly like width — set display: inline-block, block, or flex on inline elements first.
  3. Flex and grid items still need an explicit min-inline-size. They default to an automatic minimum that can override a fluid inline-size and cause overflow with long unbroken content.
  4. 100vw still includes the scrollbar on a full-bleed element, same caveat as width — cap the max at something like 98vw if the element reaches the viewport edge.

Inline-Size Clamp Generator FAQs

What is inline-size in CSS?

inline-size is the logical, writing-mode-aware equivalent of width. In the default horizontal, left-to-right writing mode it behaves exactly like width — but it automatically adapts if the writing mode or text direction changes.

Should I use inline-size or width?

For most everyday layouts either works. Prefer inline-size when you're building components that need to work correctly in RTL languages (Arabic, Hebrew) or vertical writing modes (some Japanese/Chinese layouts) — it removes an entire class of direction-specific bugs.

What's the difference between inline-size, min-inline-size, and max-inline-size?

inline-size sets a fluid, self-contained size along the inline axis. min-inline-size sets a floor a flexible element will never shrink below. max-inline-size sets a ceiling for a fluid or percentage-based element. All three accept the same clamp() output from this tool.

Does inline-size have the same browser support as width?

Yes — CSS logical properties including inline-size have been supported in all major browsers since 2021, so support is no longer a practical concern for most projects.

Can I export the inline-size clamp value as a CSS variable, SCSS, or Tailwind?

Yes. Switch the output format above the code box to CSS Variable, SCSS, or Tailwind, and edit the name field to control the variable or config key used.

Is this inline-size clamp generator free to use?

Yes, it's completely free with no login required, and works offline once the page has loaded.

Guides