CSS Math Functions Tester - Online clamp(), min(), max()

clamp() is a CSS math function that clamps a value between an upper and lower bound. It takes three parameters: MIN, PREFERRED, and MAX. The function resolves to the preferred value as long as it stays between the min and max boundaries. If the preferred value drops below the minimum, it returns the minimum. If it exceeds the maximum, it returns the maximum. This is incredibly useful for responsive design — for example, clamp(1rem, 2vw + 0.5rem, 2rem) creates fluid typography that scales with the viewport but never goes below 1rem or above 2rem.

min() selects the smallest value from its arguments, while max() selects the largest. These are extremely useful for responsive layouts. For instance, width: min(100%, 600px) ensures an element never exceeds 600px but can shrink on smaller screens. Conversely, width: max(300px, 50%) guarantees a minimum width of 300px while allowing growth on larger screens. Both functions can accept two or more comma-separated values with mixed units.

Yes! One of the biggest strengths of CSS math functions is that they accept mixed units. You can combine absolute units like px, rem, em with relative units like vw, vh, %, and even other functions like calc(). For example: clamp(280px, 40vw, 900px) mixes pixels with viewport width. The browser handles the conversion automatically. This makes them incredibly powerful for creating fluid, responsive designs without media queries.

• Fluid Typography: font-size: clamp(1rem, 2.5vw, 2rem) — text scales smoothly between screen sizes
• Responsive Widths: width: clamp(300px, 50vw, 800px) — content area adapts fluidly
• Maximum Width Constraint: width: min(100%, 1200px) — full-width on mobile, capped on desktop
• Minimum Spacing: padding: max(16px, 3vw) — ensures breathing room on all devices
• Image Sizing: height: clamp(200px, 30vh, 500px) — hero images that adapt to viewport height

CSS math functions min(), max(), and clamp() enjoy excellent browser support. They are supported in all modern browsers including Chrome (79+), Firefox (75+), Safari (13.1+), and Edge (79+). They've been available since 2019-2020 across major browsers. For older browsers like Internet Explorer, they are not supported, but given IE's end-of-life status, CSS math functions are considered production-ready for virtually all modern web projects.

clamp(MIN, PREF, MAX) is essentially shorthand for max(MIN, min(PREF, MAX)). Both expressions yield identical results, but clamp() is more readable and concise. Use clamp() when you need both a lower and upper boundary. Use standalone min() when you only need an upper limit (e.g., preventing overflow), and standalone max() when you only need a lower limit (e.g., ensuring a minimum clickable area).

Absolutely! CSS math functions can be nested and combined with calc(). For example: clamp(200px, calc(30vw + 50px), 700px) adds 50px to the viewport-based preferred value. You can also nest them: min(max(300px, 50vw), 800px). This composability makes them extremely flexible for complex responsive behaviors without JavaScript. The browser evaluates nested functions from the inside out, just like in regular programming.