Browser-onlyNo uploadsAlways free
About Us·Contact

100+ tools · No signup · Always free

CSS Clamp() Generator

Generate fluid, responsive clamp() values for typography and spacing. Set your min/max sizes and viewport breakpoints — get production-ready CSS instantly.

Fluid ScalingVisual GraphViewport TableTailwind SupportCSS Variables

How to use

1

Pick a preset or configure manually

Start with a preset (Body Text, H1, Section Spacing…) to populate the fields instantly, or enter your own values. Presets follow industry-standard breakpoints and scale ratios.

2

Set sizes and viewport breakpoints

Enter the minimum size (at the smallest viewport) and maximum size (at the largest). Then set the viewport widths where the scaling should start and stop. 320px–1280px is a good default.

3

Choose a unit and CSS property

Select px, rem, or em. Use rem for font sizes to respect browser accessibility settings. Choose the CSS property — font-size, padding, margin, gap, width, and more are all supported.

4

Copy and use in your project

Copy the clamp() value, full CSS declaration, CSS variable, or Tailwind arbitrary value. Check the Value at Key Viewports table to verify the computed value across common device sizes before shipping.

When to use CSS clamp()

Fluid typography

Replace 3–5 font-size media query overrides with a single clamp() line. Text scales smoothly between mobile and desktop, fitting every viewport — not just the breakpoints you wrote.

Responsive section spacing

Section padding that works on a 320px phone and a 2560px monitor without breakpoints. clamp(2rem, 5vw, 8rem) gives tight mobile spacing and generous desktop breathing room.

Container widths

width: clamp(320px, 90vw, 1200px) is a clean, readable alternative to max-width + width: 100%. It constrains the width without needing a wrapping element or separate media query.

Touch-target sizing

Ensure interactive elements scale from minimum accessible touch targets (44px) on mobile to comfortable click targets on desktop, without abrupt jumps at breakpoints.

Display headings

Hero and display headings that look bold on desktop but don't overwhelm mobile viewports. H1 can scale from 2rem on phone to 5rem on widescreen using a single clamp() value.

Grid gap & layout spacing

gap: clamp(1rem, 2vw, 2rem) on a CSS grid or flexbox container gives responsive gutters that tighten on small screens and expand on large ones — no media queries needed.

How it works

Linear interpolation

The generator calculates the line that passes through (minViewport, minSize) and (maxViewport, maxSize). The slope of this line becomes the vw coefficient; the y-intercept becomes the offset. The result is clamped to [min, max] at the boundaries.

SVG scaling graph

The graph plots the clamp curve — flat at min, linear in the fluid zone, flat at max — with your viewport breakpoints marked as vertical lines. It updates live as you type so you can see the shape of your scaling immediately.

Viewport audit table

The table computes the clamped value at 8 standard device widths (320px to 1920px). Each row shows whether the value is in the fluid range or clamped at min/max, so you can verify the result before shipping.

Four output formats

The generator outputs four immediately usable formats: plain clamp() value for copy-paste, full CSS property declaration, a CSS custom property definition with usage example, and a Tailwind CSS arbitrary value for JIT mode.

Related tools

CSS Unit Converter

Convert between PX, REM, EM, %, VW and VH with a modular type scale and Tailwind mapping.

CSS Gradient Generator

Build linear, radial and conic CSS gradients with live preview and Tailwind export.

CSS Flexbox Generator

Visual flexbox playground with 8 layout templates and responsive code output.

CSS Box Shadow Generator

Multi-layer shadows, neumorphism and glow effects with instant CSS and Tailwind output.

Frequently asked questions

Quick answers about this free online tool.

CSS clamp(min, preferred, max) locks a value between a minimum and maximum, using a fluid preferred value that scales with the viewport. The browser evaluates the preferred expression (typically a calc involving vw) and returns whichever of the three values is appropriate: if preferred is below min, the result is min; if it's above max, the result is max; otherwise the result is the preferred value. This gives you smooth, breakpoint-free scaling between any two sizes.

The syntax is: property: clamp(minimum, preferred, maximum). Example: font-size: clamp(1rem, 0.5rem + 2vw, 2rem). The minimum and maximum are fixed values (rem, px, em). The preferred value uses vw (viewport width units) with an optional offset so the curve passes through your exact min/max points at your chosen breakpoints. All three values must use comparable units or be convertible — mixing px and rem works because the browser resolves them to px during layout.

The generator uses linear interpolation: given min-size at min-viewport and max-size at max-viewport, it calculates the slope = (maxSize − minSize) / (maxViewport − minViewport) and the y-intercept = minSize − slope × minViewport. The preferred value is written as: intercept + slope × 100vw. This ensures the value is exactly minSize at minViewport and exactly maxSize at maxViewport, scaling linearly in between.

Use rem for font sizes — it respects the user's browser font-size preference and is required for WCAG 2.1 accessibility compliance. Use px for spacing (padding, margin, gap) where you want consistent spacing regardless of user font preferences. Avoid mixing units in a single clamp() call when possible; this generator keeps the min and max in your chosen unit and handles the internal pixel math automatically.

All modern browsers support clamp(): Chrome 79+, Firefox 75+, Safari 13.1+, Edge 79+. Global support is above 95% as of 2024. You don't need a fallback for any actively maintained browser. For very old IE11 support (which you almost certainly don't need), provide a fixed fallback value before the clamp() declaration: font-size: 1.25rem; font-size: clamp(1rem, 2vw, 2rem). IE ignores the second declaration.

Media queries are step functions — text jumps from 16px to 20px at a specific breakpoint, creating a visible 'snap'. CSS clamp() produces continuous, smooth scaling between your chosen breakpoints with zero jumps. The result is fluid typography that fits every viewport size perfectly, not just the ones you wrote breakpoints for. For most typography and spacing, clamp() replaces 3–5 media query overrides with a single line of CSS.

Key guidelines: (1) Use 320px as the min viewport — it covers the smallest common device. (2) Use 1280px–1440px as the max viewport for body text; larger for display headings. (3) Keep the minimum font size at least 1rem (16px) for body text to maintain readability. (4) Test with browser zoom — clamp() with rem units scales correctly with zoom; px-based clamp() does not. (5) Use the Value at Key Viewports table on this page to audit the computed value at common device widths before shipping.

Yes — clamp() works for any CSS length property: padding, margin, gap, width, height, border-radius, line-height, letter-spacing, and more. For section padding you might use padding: clamp(2.5rem, 5vw, 7.5rem) to give mobile-friendly spacing that breathes on large screens. For container widths, width: clamp(320px, 90vw, 1200px) is a clean alternative to max-width combined with percentage width. The generator's Property selector supports all of these.