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.
ASCII Table
Full ASCII table for all 128 codes with decimal, hex, octal and binary values, character names and descriptions. Search by code, hex or character.
Aspect Ratio Box Generator
Generate CSS for a responsive aspect-ratio container. Use the modern aspect-ratio property or the padding-top fallback, then copy the ready code.
Base32 Encode
Base32 encode and decode text online using the standard RFC 4648 alphabet with proper padding. UTF-8 safe, fast and private in your browser.