CSS Clamp Calculator
Generate CSS clamp() values for fluid typography and spacing. Enter minimum/maximum sizes and viewport widths to get a ready-to-paste clamp() function.
What is CSS clamp()?
Reach for the clamp(min, preferred, max) function when you need values that scale fluidly between two viewport widths. It works well for responsive typography, with no breakpoints to manage. The preferred value comes from intercept + slope × 100vw, which keeps the interpolation linear between minimum and maximum.
Related Tools
PX to REM and EM Converter
Type a pixel, rem or em value and the other two update live from your root font size, 16px by default, plus a table from 8 to 96 px in pt too.
CSS Unit Converter
Convert between px, em, rem, %, pt, vh, vw for common design values — configurable 16 px base. Everything in your browser.
CSS Triangle Generator
Create pure CSS triangles using the border trick. Choose direction (up, down, left, right), size and color. Useful for tooltips, arrows and pointers. Everything in your browser.
CSS Glassmorphism Generator
Create frosted-glass effects with backdrop-filter, transparency and borders. Adjust blur, saturation and opacity. Live preview and copy-ready CSS. Everything in your browser.
CSS Border Radius Generator
Create custom rounded shapes with 8 independent controls (4 corners × 2 axes). Live preview and ready-to-copy CSS. Everything in your browser.
Mesh Gradient Generator
Create modern mesh gradients by combining multiple radial-gradients. Add, remove and drag points to compose vibrant backgrounds Stripe/Linear style. Everything in your browser.