Clamp Calculator

Generate responsive CSS clamp() values for fluid typography and spacing. Set min/max viewport and values, preview at every breakpoint.

Common Use Cases

clamp(1rem, 0.8239rem + 0.7512vw, 1.5rem)

Viewport Range

Min Viewport: 375px

Max Viewport: 1440px

Value Range

Min Value: 16px (1.000rem)

Max Value: 24px (1.500rem)

Root Font Size: 16px

How it works

Minimum16pxat ≤ 375px

Preferred0.8239rem + 0.7512vwfluid scaling

Maximum24pxat ≥ 1440px

Values at each breakpoint

375px

16.0px

480px

16.8px

640px

18.0px

768px

19.0px

1024px

20.9px

1280px

22.8px

1440px

24.0px

Live preview

The quick brown fox jumps over the lazy dog

16-24

Show Tailwind

CSS

font-size: clamp(1rem, 0.8239rem + 0.7512vw, 1.5rem);

/* Or as a CSS variable */
--fluid-size: clamp(1rem, 0.8239rem + 0.7512vw, 1.5rem);

Tailwind CSS

<div class="text-[clamp(1rem, 0.8239rem + 0.7512vw, 1.5rem)]">
  ...
</div>

Explore more Goodies

Other free tools from Eguth Studio you might enjoy.

View all Goodies

Layout

CSS Grid Generator

Build CSS grid layouts visually. Adjust columns, rows and gaps, then copy the code.

Try it ->

Layout

Border Radius Previewer

Visualize and adjust complex border-radius values on a live preview.

Typography Scale

Generate a responsive typographic scale from a base size and ratio. Export CSS variables, clamp() fluid values and Tailwind config.

Try it ->

Layout

Flexbox Playground

Build flexbox layouts visually. Control direction, justify, align, wrap, gap and individual item properties.

Try it ->

NewLayout

Spacing System Generator

Build a consistent spacing scale from a base unit. Generate linear, geometric or Fibonacci scales with CSS variables and Tailwind config.

Try it ->

NewLayout

CSS Transform Playground

Combine 2D and 3D CSS transforms visually — translate, rotate, scale, skew and perspective with live preview and transform-origin control.

Try it ->

View all Goodies