CSS Clamp Generator
Build responsive fluid typography and spacing using the CSS clamp(min, preferred, max) formula.
Clamp Parameters
px
px
px
px
Output Unit:
Viewport Scaling Simulation
768px width320px (Mobile)768px (Tablet)1440px (Desktop)1920px (Wide)
Computed Value at 768px:
21.9px
Responsive Heading
CSS Clamp Declaration
css
font-size: clamp(1rem, 0.648rem + 1.502vw, 2rem);How It Works
The CSS clamp(min, preferred, max) function clamps an element's value between a defined minimum and maximum range:
- Minimum: The lowest boundary value the property will ever take (e.g. on mobile devices).
- Preferred Value: The scaling expression (often combining rem and viewport units
vw) that linearly adapts as screen width changes. - Maximum: The highest boundary value, preventing typography or spacing from expanding excessively on ultrawide monitors.
Related Frontend Tools
Core
CSS Unit Converter
Convert rem, px, em, viewport, and physical CSS dimensions with real-time accuracy.
Popular
Color Converter
Bidirectional color conversion across HEX, RGB, RGBA, HSL, HSLA, HSV, and OKLCH.
WCAG
Color Contrast Checker
Calculate WCAG 2.1 contrast ratios and verify accessibility compliance for normal text, large text, and UI components.