CSS Clamp Calculator
Create fluid responsive designs without media queries
CSS Clamp Calculator
clamp(MIN, PREFERRED, MAX) lets your values scale fluidly between MIN and MAX based on screen size. Perfect for responsive text and spacing!
px
Smallest allowed size
px
Largest allowed size
px
Mobile width
px
Desktop width
Live Preview
Aa
Mobile
Aa
Tablet
Aa
Desktop
Generated CSS
font-size: clamp(16px, calc(16px + 0.91vw), 24px);
Quick Presets
Examples
Responsive Text Size
h1 {
/* Scales from 32px to 64px */
font-size: clamp(2rem, 1rem + 3vw, 4rem);
}
p {
/* Scales from 16px to 20px */
font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
}
This creates:
- Headings that scale from 32px on mobile to 64px on desktop
- Body text that scales from 16px to 20px
- No media queries needed!
Card Layout With Clamp
.card {
/* Responsive width */
width: clamp(300px, 80%, 800px);
/* Responsive padding */
padding: clamp(1rem, 0.5rem + 2vw, 3rem);
/* Responsive spacing */
margin-bottom: clamp(1rem, 0.5rem + 2vw, 3rem);
}
This creates a card that:
- Has a width between 300px and 800px
- Padding grows from 16px to 48px
- Margin grows from 16px to 48px
What is CSS Clamp?
The CSS clamp() function lets you create fluid values that adapt to screen size, eliminating the need for multiple media queries.
Syntax:
clamp(MIN, PREFERRED, MAX)
- MIN: Smallest allowed value
- PREFERRED: Ideal value (usually fluid with vw)
- MAX: Largest allowed value
Why Use Clamp?
-
Fewer Media Queries - Save time and code
-
Smooth Scaling - Elements resize fluidly
-
Built-in Limits - Prevents text from getting too small or too large
How To Use
- Choose a property you want to make responsive
- Set min and max sizes for small and large screens
- Enter viewport widths for the scaling range
- Copy the generated code into your CSS
Tip: For text, using rem units (16px = 1rem) is better for accessibility!
Browser Support
CSS Clamp()
95%
Chrome 79+
Firefox 75+
Safari 13.7+
Edge 79+
IE Not Supported