CSS Clamp Calculator

Continue in the tool

More pages for this tool

Fluid typography with CSS clamp(): scale fonts without media queries

fluid CSS spacing clamp padding gap

Fluid spacing with CSS clamp(): padding and gap that scale with the screen

Fluid spacing with `clamp()` applies the same logic as fluid typography to layout properties: padding, margin, gap, row-gap, column-gap. The result is a layout that breathes proportionally at any screen size, from 320px to 2560px, without a single media query.

Why fluid spacing improves the experience

When section padding is fixed (e.g., 64px), on mobile it becomes proportionally huge and on ultra-wide screens it looks insignificant. With clamp, padding scales between, for example, 24px at 320px viewport and 96px at 1440px. The visual rhythm of the page stays coherent across the full range of devices.
For design system tokens, define fluid variables on `:root` using the calculator's exact output, for example `--space-section: clamp(1.5rem, 6.4286vw + 0.2143rem, 6rem)` for a section padding that goes from 24px to 96px between a 320px and a 1440px viewport. Components use `padding: var(--space-section)` and the entire system scales automatically, without any media query inside individual components.
Fluid spacing has a practical floor: the minimum value cannot shrink so much that it compromises touch usability. WCAG 2.2 defines in success criterion 2.5.8 (Target Size Minimum) that pointer targets should be at least 24×24 CSS px, with a few specific exceptions. When setting the minimum of a `clamp()` for button padding or the gap between clickable items, make sure that minimum keeps that target area once combined with the inner content, not just that the number looks small enough visually.

Ready-made fluid spacing tokens

Section padding (24px → 96px)

Input: min: 24px @ 320px viewport, max: 96px @ 1440px viewport
Expected output: --space-section: clamp(1.5rem, 6.4286vw + 0.2143rem, 6rem);

Token for vertical section padding. Scales proportionally between mobile and desktop.

Cards grid gap (12px → 28px)

Input: min: 12px @ 375px, max: 28px @ 1280px
Expected output: --gap-cards: clamp(0.75rem, 1.768vw + 0.3356rem, 1.75rem);

Responsive gap for grids. Avoids visual compression on small screens.

Container side margin (16px → 64px)

Input: min: 16px @ 360px viewport, max: 64px @ 1600px viewport
Expected output: --margin-container: clamp(1rem, 3.871vw + 0.129rem, 4rem);

Ideal for the side breathing room of wide layouts, where a fixed margin looks cramped on ultra-wide screens and excessive on mobile.

Full tool FAQ

What is CSS clamp()?

It's a CSS function that constrains a value between a minimum and a maximum. In the middle it accepts any CSS expression, typically `viewport-width + rem-constant` for fluid typography.

How does fluid typography with clamp work?

What is the difference between clamp and media queries for typography?

Why does the preferred value combine vw and rem?

Can I use clamp for properties other than font-size?

What happens below the minimum viewport?

Do I need to set a base `font-size` on `html` to use rem?

Does clamp have good browser compatibility?

Frequently asked questions

Does clamp accept mixed units (px and rem)?

Not directly in the same parameter. But the browser converts automatically before evaluating. `clamp(1rem, 2vw + 0.5rem, 3rem)` works perfectly, the browser uses px internally for comparison.

Can I use clamp with dvh/dvw for full-screen spacing?

Yes. Dynamic viewport units (dvh, dvw) work inside clamp. They are especially useful for hero section heights that should vary between devices and browser states.

Does clamp for spacing respect the minimum touch target area?

Only if you set the minimum with that in mind. `clamp()` knows nothing about WCAG, it just interpolates between the two numbers you give it. It is up to whoever configures it to ensure the padding's minimum value, added to the button's inner content, reaches the 24×24px recommended by success criterion 2.5.8.

Next steps

Continue in the tool

Open full tool

fluid CSS spacing clamp padding gap

Fluid spacing with CSS clamp(): padding and gap that scale with the screen

Why fluid spacing improves the experience

When section padding is fixed (e.g., 64px), on mobile it becomes proportionally huge and on ultra-wide screens it looks insignificant. With clamp, padding scales between, for example, 24px at 320px viewport and 96px at 1440px. The visual rhythm of the page stays coherent across the full range of devices.

For design system tokens, define fluid variables on `:root` using the calculator's exact output, for example `--space-section: clamp(1.5rem, 6.4286vw + 0.2143rem, 6rem)` for a section padding that goes from 24px to 96px between a 320px and a 1440px viewport. Components use `padding: var(--space-section)` and the entire system scales automatically, without any media query inside individual components.

Fluid spacing has a practical floor: the minimum value cannot shrink so much that it compromises touch usability. WCAG 2.2 defines in success criterion 2.5.8 (Target Size Minimum) that pointer targets should be at least 24×24 CSS px, with a few specific exceptions. When setting the minimum of a `clamp()` for button padding or the gap between clickable items, make sure that minimum keeps that target area once combined with the inner content, not just that the number looks small enough visually.

Ready-made fluid spacing tokens

Section padding (24px → 96px)

Input: min: 24px @ 320px viewport, max: 96px @ 1440px viewport
Expected output: --space-section: clamp(1.5rem, 6.4286vw + 0.2143rem, 6rem);

Token for vertical section padding. Scales proportionally between mobile and desktop.

Cards grid gap (12px → 28px)

Input: min: 12px @ 375px, max: 28px @ 1280px
Expected output: --gap-cards: clamp(0.75rem, 1.768vw + 0.3356rem, 1.75rem);

Responsive gap for grids. Avoids visual compression on small screens.

Container side margin (16px → 64px)

Input: min: 16px @ 360px viewport, max: 64px @ 1600px viewport
Expected output: --margin-container: clamp(1rem, 3.871vw + 0.129rem, 4rem);

Ideal for the side breathing room of wide layouts, where a fixed margin looks cramped on ultra-wide screens and excessive on mobile.

Full tool FAQ

What is CSS clamp()?

It's a CSS function that constrains a value between a minimum and a maximum. In the middle it accepts any CSS expression, typically `viewport-width + rem-constant` for fluid typography.

How does fluid typography with clamp work?

What is the difference between clamp and media queries for typography?

Why does the preferred value combine vw and rem?

Can I use clamp for properties other than font-size?

What happens below the minimum viewport?

Do I need to set a base `font-size` on `html` to use rem?

Does clamp have good browser compatibility?

Frequently asked questions

Does clamp accept mixed units (px and rem)?

Not directly in the same parameter. But the browser converts automatically before evaluating. `clamp(1rem, 2vw + 0.5rem, 3rem)` works perfectly, the browser uses px internally for comparison.

Can I use clamp with dvh/dvw for full-screen spacing?

Yes. Dynamic viewport units (dvh, dvw) work inside clamp. They are especially useful for hero section heights that should vary between devices and browser states.