CSS Clamp Generator
Create a fluid, responsive size with the CSS clamp() function. Set a minimum and maximum size and the viewport range to scale between, then copy the value for font-size, padding, margin or gap.
How to generate a CSS clamp() value
- Enter the minimum and maximum size in pixels.
- Set the minimum and maximum viewport widths to scale between.
- Copy the generated clamp() value into your CSS.
Examples
Fluid heading
min 16px, max 24px, viewport 320px to 1280px
clamp(1rem, calc(0.8333rem + 0.8333vw), 1.5rem)
Fluid section spacing
min 32px, max 48px, viewport 400px to 1200px
clamp(2rem, calc(1.5rem + 2vw), 3rem)
Frequently asked questions
What does CSS clamp() do?
clamp(min, preferred, max) returns the preferred value but never lets it drop below the minimum or rise above the maximum. The preferred value here uses vw units so the size scales with the viewport.
Why use fluid type instead of media-query breakpoints?
Fluid type scales smoothly at every width with a single declaration, so text and spacing grow gradually rather than jumping at fixed breakpoints. It usually means less CSS to maintain.
Why does the output use rem and vw instead of px?
The bounds are in rem so they respect the user's browser font-size setting for accessibility, and the fluid middle uses vw so it scales with viewport width. Both are derived from the pixel values you enter.
Do browsers support clamp()?
Yes. clamp(), min() and max() are supported in all current major browsers, including Chrome, Edge, Firefox and Safari. Very old browsers may need a static fallback declared first.
What happens outside the viewport range?
Below the minimum viewport the size locks to your minimum, and above the maximum viewport it locks to your maximum. It only scales fluidly between the two widths.
Is my input sent to a server?
No. The clamp() value is computed entirely in your browser, so nothing you enter leaves your device.
Related tools
Aspect Ratio Calculator
Calculate aspect ratios fast. Enter a ratio like 16:9 and one dimension to get the other, or enter width and height to simplify the ratio.
Box Shadow Generator
Build CSS box-shadow visually. Drag sliders for offset, blur, spread, color and opacity, see a live preview, and copy the box-shadow code.
.env to JSON
Convert a .env file to JSON, or JSON back to .env. Parses KEY=value lines, comments, quotes and export. Runs entirely in your browser.
Base58 Encoder
Encode and decode Base58 online with the Bitcoin alphabet. Convert text to Base58 or back, UTF-8 safe, no confusing 0 O I l. Runs in your browser.
Base64 Decode
Decode Base64 to plain text online. Paste a Base64 or base64url string and get instant UTF-8 output. Free, fast and runs in your browser.
Base64 Encode
Encode text to Base64 online. UTF-8 safe, handles emoji and accents, with an optional URL-safe (base64url) mode. Runs in your browser, nothing uploaded.