CSS Clamp Calculator
Generate fluid typography and responsive spacing with CSS clamp().
Set min/max values and let the calculator create the formula.
The quick brown fox
Size at smallest viewport
Size at largest viewport
Typically 320px (mobile)
Typically 1200px or 1440px (desktop)
font-size: clamp(16px, 10.1818px + 1.8182vw, 32px);How CSS clamp() Works
The clamp() function takes three values: a minimum, a preferred (fluid) value, and a maximum.
- MIN:The smallest the value can be (floor)
- PREFERRED:A fluid value using viewport units (vw) that scales between min and max
- MAX:The largest the value can be (ceiling)
Common Use Cases
Fluid Typography
Scale font sizes smoothly between mobile and desktop without media queries.
Responsive Spacing
Create padding and margins that adapt to viewport size.
Flexible Widths
Set element widths that grow and shrink within bounds.
Grid Gaps
Scale gaps in flex and grid layouts for better responsiveness.
Browser Support
CSS clamp() is supported in all modern browsers since 2020.
Explore more CSS tools
CSS Grid Generator
Create grid layouts visually
CSS Flexbox Generator
Create flex layouts visually
CSS Gradient Generator
Create custom gradients
CSS Text Gradient
Gradient text effects
CSS Gradients Collection
275+ ready-to-use gradients
CSS Box Shadow Generator
Design multi-layer shadows
CSS Selection Generator
Style text highlight colors
CSS Scrollbar Generator
Style custom scrollbars
CSS Blend Mode Generator
Mix colors with blend modes
CSS Cursor Generator
Preview all cursor styles
CSS Loader Generator
Create loading animations
CSS Button Generator
Design buttons with hover effects
CSS Glow Generator
Create neon glow effects
Fluid Typography
Scale text across screen sizes