CSS Clamp() Function Tutorial
Master fluid responsive design with the clamp() function and create layouts that adapt perfectly to any screen size
What Is the CSS Clamp() Function?
The CSS clamp() function allows you to set a value that is clamped between a minimum and maximum value, with a preferred value in between. This is incredibly powerful for creating responsive designs that work across a wide range of screen sizes without media queries.
Key Benefits:
- Create fluid typography that scales with viewport size
- Build responsive layouts without media queries
- Maintain reasonable limits for all screen sizes
- Simplify responsive design code
- Improve performance by reducing need for JavaScript
CSS Clamp() Implementation
Complete Example Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Clamp() Function Tutorial</title>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
:root {
--primary-color: #3498db;
--secondary-color: #2ecc71;
--accent-color: #e74c3c;
--dark-color: #2c3e50;
--light-color: #ecf0f1;
--text-color: #333;
--text-light: #fff;
--spacing-sm: 0.5rem;
--spacing-md: 1rem;
--spacing-lg: 1.5rem;
--spacing-xl: 2rem;
--border-radius: 0.5rem;
--font-main: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
--font-heading: 'Arial', sans-serif;
}
body {
font-family: var(--font-main);
line-height: 1.6;
color: var(--text-color);
background-color: var(--light-color);
padding: var(--spacing-md);
}
.container {
max-width: 1200px;
margin: 0 auto;
}
header {
text-align: center;
margin-bottom: var(--spacing-xl);
padding: var(--spacing-lg);
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
color: var(--text-light);
border-radius: var(--border-radius);
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
h1 {
font-family: var(--font-heading);
font-size: clamp(1.8rem, 5vw, 3rem);
margin-bottom: var(--spacing-sm);
}
h2 {
font-family: var(--font-heading);
font-size: clamp(1.4rem, 4vw, 2rem);
margin: var(--spacing-lg) 0 var(--spacing-md);
color: var(--dark-color);
padding-bottom: var(--spacing-sm);
border-bottom: 2px solid var(--primary-color);
}
.example {
background: white;
border-radius: var(--border-radius);
padding: var(--spacing-lg);
margin-bottom: var(--spacing-lg);
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.demo {
border: 2px solid #e9ecef;
border-radius: var(--border-radius);
padding: var(--spacing-lg);
margin: var(--spacing-md) 0;
background: #f8f9fa;
}
.code-block {
background: #2d2d2d;
color: #f8f8f2;
padding: var(--spacing-md);
border-radius: var(--border-radius);
overflow-x: auto;
margin: var(--spacing-md) 0;
font-family: 'Consolas', 'Monaco', monospace;
font-size: 0.875rem;
}
.btn {
display: inline-block;
padding: var(--spacing-sm) var(--spacing-md);
background: var(--primary-color);
color: var(--text-light);
border: none;
border-radius: var(--border-radius);
cursor: pointer;
font-size: 0.875rem;
margin-right: var(--spacing-sm);
transition: background-color 0.2s ease;
}
.btn:hover {
background: #2980b9;
}
.btn-copy {
background: var(--secondary-color);
}
.btn-copy:hover {
background: #27ae60;
}
/* Example 1: Fluid Typography */
.fluid-typography {
font-size: clamp(1rem, 2.5vw, 2.5rem);
line-height: 1.4;
padding: var(--spacing-md);
background-color: var(--primary-color);
color: white;
margin-bottom: var(--spacing-md);
border-radius: var(--border-radius);
text-align: center;
}
/* Example 2: Responsive Spacing */
.responsive-spacing {
width: clamp(300px, 80%, 800px);
padding: clamp(0.5rem, 3vw, 2rem);
background-color: var(--secondary-color);
color: white;
margin: 0 auto var(--spacing-md);
border-radius: var(--border-radius);
text-align: center;
}
/* Example 3: Container Widths */
.container-widths {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-md);
margin-bottom: var(--spacing-md);
}
.width-item {
background-color: var(--accent-color);
color: white;
padding: var(--spacing-md);
border-radius: var(--border-radius);
text-align: center;
flex: 1;
min-width: 200px;
}
.width-small {
width: clamp(200px, 30%, 300px);
}
.width-medium {
width: clamp(300px, 50%, 500px);
}
.width-large {
width: clamp(400px, 70%, 700px);
}
/* Example 4: Aspect Ratio with Clamp */
.aspect-ratio-container {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-md);
margin-bottom: var(--spacing-md);
}
.aspect-box {
background-color: var(--dark-color);
color: white;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--border-radius);
}
.aspect-16-9 {
width: clamp(200px, 40vw, 400px);
height: clamp(112px, calc(40vw * 9 / 16), 225px);
}
.aspect-square {
width: clamp(150px, 30vw, 300px);
height: clamp(150px, 30vw, 300px);
}
/* Example 5: Grid Layout with Clamp */
.grid-clamp {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(clamp(200px, 30%, 300px), 1fr));
gap: clamp(0.5rem, 2vw, 1.5rem);
margin-bottom: var(--spacing-md);
}
.grid-item {
background-color: var(--primary-color);
color: white;
padding: var(--spacing-md);
border-radius: var(--border-radius);
text-align: center;
}
/* Example 6: Responsive Border Radius */
.responsive-radius {
width: clamp(300px, 80%, 600px);
height: 150px;
background-color: var(--secondary-color);
color: white;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto var(--spacing-md);
border-radius: clamp(0.5rem, 2vw, 2rem);
text-align: center;
}
/* Example 7: Line Height Control */
.line-height-example {
width: clamp(300px, 80%, 600px);
margin: 0 auto var(--spacing-md);
font-size: 1.2rem;
line-height: clamp(1.2, 2.5vw, 2);
background-color: var(--accent-color);
color: white;
padding: var(--spacing-md);
border-radius: var(--border-radius);
}
/* Example 8: Responsive Shadows */
.shadow-example {
width: clamp(300px, 80%, 600px);
height: 150px;
background-color: var(--dark-color);
color: white;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto var(--spacing-md);
border-radius: var(--border-radius);
box-shadow:
0 clamp(2px, 0.5vw, 8px) clamp(4px, 1vw, 16px) rgba(0,0,0,0.2);
text-align: center;
}
/* Example 9: Animation with Clamp */
@keyframes smooth-grow {
0% {
width: clamp(100px, 20vw, 200px);
}
50% {
width: clamp(200px, 40vw, 400px);
}
100% {
width: clamp(100px, 20vw, 200px);
}
}
.animation-example {
height: 80px;
background-color: var(--primary-color);
color: white;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto var(--spacing-md);
border-radius: var(--border-radius);
animation: smooth-grow 4s infinite ease-in-out;
text-align: center;
}
/* Example 10: Complex Clamp Usage */
.complex-clamp {
--min-size: 1rem;
--preferred-size: 5vw;
--max-size: 3rem;
font-size: clamp(var(--min-size), var(--preferred-size), var(--max-size));
padding: clamp(0.5rem, 2vw, 2rem);
margin: clamp(0.5rem, 1.5vw, 1.5rem);
background: linear-gradient(
45deg,
var(--primary-color),
var(--secondary-color)
);
color: white;
border-radius: var(--border-radius);
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>CSS Clamp() Function Tutorial</h1>
<p>Master fluid responsive design with the clamp() function</p>
</header>
<section class="example">
<h2>1. Fluid Typography</h2>
<p>The clamp() function allows you to set a preferred value within a min-max range, perfect for fluid typography.</p>
<div class="demo">
<div class="fluid-typography">
This text scales smoothly between 1rem and 2.5rem based on viewport width.
</div>
</div>
<div class="code-block">
.fluid-typography {
font-size: clamp(1rem, 2.5vw, 2.5rem);
}
</div>
</section>
<section class="example">
<h2>2. Responsive Spacing</h2>
<p>Create spacing that adapts to different screen sizes while maintaining reasonable limits.</p>
<div class="demo">
<div class="responsive-spacing">
My width is clamped between 300px and 800px, with 80% as the preferred value.
</div>
</div>
<div class="code-block">
.responsive-spacing {
width: clamp(300px, 80%, 800px);
padding: clamp(0.5rem, 3vw, 2rem);
}
</div>
</section>
<section class="example">
<h2>3. Container Widths</h2>
<p>Control element widths with responsive constraints using clamp().</p>
<div class="demo">
<div class="container-widths">
<div class="width-item width-small">Small: clamp(200px, 30%, 300px)</div>
<div class="width-item width-medium">Medium: clamp(300px, 50%, 500px)</div>
<div class="width-item width-large">Large: clamp(400px, 70%, 700px)</div>
</div>
</div>
<div class="code-block">
.width-small {
width: clamp(200px, 30%, 300px);
}
.width-medium {
width: clamp(300px, 50%, 500px);
}
.width-large {
width: clamp(400px, 70%, 700px);
}
</div>
</section>
<section class="example">
<h2>4. Aspect Ratio with Clamp</h2>
<p>Maintain aspect ratios while keeping dimensions responsive.</p>
<div class="demo">
<div class="aspect-ratio-container">
<div class="aspect-box aspect-16-9">16:9 Ratio</div>
<div class="aspect-box aspect-square">Square</div>
</div>
</div>
<div class="code-block">
.aspect-16-9 {
width: clamp(200px, 40vw, 400px);
height: clamp(112px, calc(40vw * 9 / 16), 225px);
}
.aspect-square {
width: clamp(150px, 30vw, 300px);
height: clamp(150px, 30vw, 300px);
}
</div>
</section>
<section class="example">
<h2>5. Grid Layout with Clamp</h2>
<p>Create responsive grid layouts that adapt to different screen sizes.</p>
<div class="demo">
<div class="grid-clamp">
<div class="grid-item">Grid Item 1</div>
<div class="grid-item">Grid Item 2</div>
<div class="grid-item">Grid Item 3</div>
<div class="grid-item">Grid Item 4</div>
</div>
</div>
<div class="code-block">
.grid-clamp {
display: grid;
grid-template-columns: repeat(auto-fit,
minmax(clamp(200px, 30%, 300px), 1fr));
gap: clamp(0.5rem, 2vw, 1.5rem);
}
</div>
</section>
<section class="example">
<h2>6. Responsive Border Radius</h2>
<p>Make border radii responsive to maintain visual balance across devices.</p>
<div class="demo">
<div class="responsive-radius">
My border radius changes based on viewport width
</div>
</div>
<div class="code-block">
.responsive-radius {
border-radius: clamp(0.5rem, 2vw, 2rem);
}
</div>
</section>
<section class="example">
<h2>7. Line Height Control</h2>
<p>Use clamp() to create responsive line heights for better readability.</p>
<div class="demo">
<div class="line-height-example">
This text has a line height that scales between 1.2 and 2 based on viewport width, improving readability across devices.
</div>
</div>
<div class="code-block">
.line-height-example {
line-height: clamp(1.2, 2.5vw, 2);
}
</div>
</section>
<section class="example">
<h2>8. Responsive Shadows</h2>
<p>Create shadow effects that scale appropriately with different screen sizes.</p>
<div class="demo">
<div class="shadow-example">
My shadow intensity changes based on viewport size
</div>
</div>
<div class="code-block">
.shadow-example {
box-shadow:
0 clamp(2px, 0.5vw, 8px)
clamp(4px, 1vw, 16px) rgba(0,0,0,0.2);
}
</div>
</section>
<section class="example">
<h2>9. Animation with Clamp</h2>
<p>Create smooth animations that work well across different screen sizes.</p>
<div class="demo">
<div class="animation-example">
Animated with clamp() values
</div>
</div>
<div class="code-block">
@keyframes smooth-grow {
0% {
width: clamp(100px, 20vw, 200px);
}
50% {
width: clamp(200px, 40vw, 400px);
}
100% {
width: clamp(100px, 20vw, 200px);
}
}
.animation-example {
animation: smooth-grow 4s infinite ease-in-out;
}
</div>
</section>
<section class="example">
<h2>10. Complex Clamp Usage</h2>
<p>Combine clamp() with CSS variables for powerful, dynamic styling.</p>
<div class="demo">
<div class="complex-clamp">
Using CSS variables with clamp() for dynamic responsive design
</div>
</div>
<div class="code-block">
.complex-clamp {
--min-size: 1rem;
--preferred-size: 5vw;
--max-size: 3rem;
font-size: clamp(var(--min-size), var(--preferred-size), var(--max-size));
padding: clamp(0.5rem, 2vw, 2rem);
margin: clamp(0.5rem, 1.5vw, 1.5rem);
}
</div>
</section>
</div>
</body>
</html>Key CSS Clamp() Concepts
Syntax & Parameters
- Basic syntax:
clamp(min, preferred, max) - Minimum value: The smallest allowed value
- Preferred value: The value to use when possible
- Maximum value: The largest allowed value
- All parameters can use different units
- Works with length, percentage, time, and number values
Common Use Cases
- Fluid typography:
clamp(1rem, 2.5vw, 2.5rem) - Responsive spacing:
clamp(1rem, 5%, 3rem) - Container sizing:
clamp(300px, 80%, 1200px) - Aspect ratios:
clamp(200px, 40vw, 600px) - Grid layouts:
minmax(clamp(200px, 30%, 300px), 1fr)
CSS Clamp() Best Practices
Do's
- Use relative units (vw, rem) for preferred values
- Set reasonable minimum and maximum limits
- Test across various screen sizes and devices
- Combine with CSS variables for dynamic values
- Use for properties that benefit from fluid scaling
Don'ts
- Don't use where fixed values are more appropriate
- Avoid extreme minimum or maximum values
- Don't forget to test on very small and large screens
- Avoid overusing for properties that don't need fluidity
- Don't use incompatible units in calculations
Real-World Applications
Where to Use CSS Clamp()
- Fluid Typography: Text that scales smoothly with viewport size
- Responsive Layouts: Containers that adapt to available space
- Spacing Systems: Consistent yet adaptive margins and padding
- Grid Systems: Flexible grid items with reasonable limits
- Hero Sections: Responsive headings and content areas
- Navigation: Menus that work on all screen sizes
- Card Layouts: Consistently sized cards across devices
Browser Support & Limitations
Compatibility Information
The clamp() function is well-supported in all modern browsers, making it safe to use in production.
- Supported in Chrome 79+, Firefox 75+, Safari 13.1+, Edge 79+
- Not supported in Internet Explorer
- Can be used with @supports for progressive enhancement
- Works with most CSS properties that accept length values
- Consider providing fallbacks for older browsers
Ready to Experiment with CSS Clamp()?
Try these CSS clamp() examples in our interactive editor. Modify the code, see the results in real-time, and practice implementing fluid responsive design in your projects.