CSS Clamp Calculator
Generate clamp() values for fluid, responsive typography and spacing.
Generated clamp()
clamp(16px, 1.4286vw + 11.4286px, 32px)
Live preview at 760px viewport≈ 22.3px
Preview text
Common use cases
h1 heading
clamp(28px, 3.5vw + 16px, 56px)Body text
clamp(16px, 0.35vw + 14.7px, 20px)Section spacing
clamp(32px, 5.7vw + 13.7px, 96px)How CSS clamp() works
CSS clamp(min, preferred, max) locks a value between a minimum and maximum while letting it scale fluidly with the viewport. The preferred value uses vw units plus a pixel offset — calculated from the slope of the linear interpolation between your min/max values at your min/max viewports. This means zero media queries for fluid typography and spacing.
Related tools: px to rem converter, CSS gradient generator, and the CSS flexbox generator.
Private & free — this tool runs entirely in your browser.
Recommended: IndieKit — Ship your Next.js startup in days.affiliate
Related Design & CSS tools
Color Converter
Convert a color to HEX, RGB, HSL, HSB, and CMYK at once.
HEX to RGB
Convert HEX color codes to RGB / RGBA values.
RGB to HEX
Convert RGB values into HEX color codes.
CSS Box Shadow Generator
Visually design CSS box-shadow with a live preview and code.
CSS Border Radius Generator
Visually craft border-radius with a live preview.
HEX to CMYK
Convert HEX colors to CMYK print values.
CMYK to HEX
Convert CMYK print values to HEX colors.
HEX to HSB
Convert HEX colors to HSB / HSV values.