Block-Size Clamp Generator - Logical CSS clamp()

You are using "block-size" clamp generator

The logical, writing-mode-aware equivalent of height.

Input Unit

pxrem

Layout Property <px>

Fluid Range

Viewport Unit

Viewport Size <px>

min

max

Property Size <px>

min

max

Output

Output Unit

pxremem

CSS clamp Generated Code to copy!

CSS
block-size: clamp(16px, calc(9.143px + 1.905vw), 32px);

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

What is CSS `block-size`?

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

Example:

block-size: clamp(180px, calc(120px + 18.75vw), 240px);

Same fluid scaling as a height clamp() on the Layout & Spacing tool, just expressed with the logical property name.

block-size vs. height: When to Use Which

✅ Use block-size alongside inline-size for fully logical, direction-agnostic components.
✅ Use block-size when a vertical writing mode is a real possibility for the project.
✅ height is fine, and more familiar, when the layout is always horizontal writing mode.
✅ The clamp() math is identical either way — only the property name changes.

block-size, min-block-size & max-block-size

block-size — a self-contained fluid size along the block axis.
min-block-size — a floor an element will never shrink below.
max-block-size — a ceiling so a fluid or percentage-based element never grows too tall.

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

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

Using block-size Carefully

Don't mix block-size and height on the same element. Whichever declaration comes last in the cascade wins.
vh-based units include mobile browser chrome. If the element needs to fill the actual visible viewport on mobile, consider dvh-based sizing instead of vh.
Percentage-based block-size needs a sized ancestor. Same rule as height — a percentage value resolves against the parent's block-size, which must itself have a definite size.
block-size and aspect-ratio can conflict — if both are set, the browser only lets one dimension stay auto-derived from the other.

Block-Size Clamp Generator FAQs

What is block-size in CSS?

block-size is the logical, writing-mode-aware equivalent of height. In the default horizontal writing mode it behaves exactly like height, but it automatically adapts if the writing mode changes (for example, some vertical Japanese or Chinese layouts).

Should I use block-size or height?

For most everyday layouts either works. Prefer block-size when building components that need to work correctly under vertical writing modes, or when you're pairing it with inline-size for a fully logical, direction-agnostic layout.

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

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

Does block-size have the same browser support as height?

Yes — CSS logical properties including block-size have been supported in all major browsers since 2021.

Can I export the block-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 block-size clamp generator free to use?

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