Presets

Minimum Value

Preferred Value

Maximum Value

CSS Property

Syntax

clamp(MIN, PREFERRED, MAX)

Returns PREFERRED, constrained between MIN and MAX

Clamp Visualization

MIN: 16px
PREFERRED: 4vw
MAX: 24px
Small viewportLarge viewport

Live Preview

Resize browser to see fluid text scaling

Generated CSS

font-size: clamp(16px, 4vw, 24px);

Complete CSS Reference

/* ===========================================
   CSS Math Functions Reference
   =========================================== */

/* ============ clamp() ============ */
/* Syntax: clamp(MIN, PREFERRED, MAX) */

/* Fluid Typography */
.fluid-text {
  /* Minimum 16px, preferred 4vw, maximum 24px */
  font-size: clamp(16px, 4vw, 24px);
}

/* Fluid Typography with rem */
.fluid-heading {
  /* Scales with viewport but respects user font preferences */
  font-size: clamp(1.5rem, 2.5vw + 1rem, 3rem);
}

/* Fluid Spacing */
.fluid-spacing {
  /* Responsive padding that scales with viewport */
  padding: clamp(1rem, 5vw, 3rem);
  margin-block: clamp(2rem, 8vh, 6rem);
}

/* Container Width */
.container {
  /* Never smaller than 320px, never larger than 1200px */
  width: clamp(320px, 90%, 1200px);
  margin-inline: auto;
}

/* ============ min() ============ */
/* Returns the smallest value */

/* Responsive Container */
.responsive-container {
  /* Full width up to 1200px maximum */
  width: min(100%, 1200px);
}

/* Card Grid */
.card {
  /* Each card at least 250px, but can grow */
  width: min(100%, 400px);
}

/* Safe Padding */
.safe-area {
  /* Use smaller of fixed or percentage padding */
  padding: min(5vw, 50px);
}

/* ============ max() ============ */
/* Returns the largest value */

/* Minimum Height */
.hero {
  /* At least 500px or full viewport height */
  min-height: max(500px, 100vh);
}

/* Minimum Width */
.sidebar {
  /* At least 200px even on small screens */
  width: max(200px, 20vw);
}

/* Ensure Readability */
.readable-text {
  /* Font never smaller than 14px */
  font-size: max(14px, 1rem);
}

/* ============ calc() ============ */
/* Perform calculations */

/* Full Width Minus Sidebar */
.main-content {
  width: calc(100% - 250px);
}

/* Centering with Offset */
.centered-offset {
  left: calc(50% - 150px);
}

/* Viewport Minus Header */
.full-height {
  height: calc(100vh - 60px);
}

/* Grid Calculations */
.grid-item {
  /* 4 columns with 1rem gap */
  width: calc((100% - 3rem) / 4);
}

/* Percentage of Parent with Offset */
.offset-element {
  margin-left: calc(25% + 1rem);
}

/* ============ Combining Functions ============ */

/* Nested Functions */
.complex-sizing {
  /* Fluid font with calc inside clamp */
  font-size: clamp(1rem, calc(0.5rem + 2vw), 2.5rem);
}

/* Min with Calc */
.smart-container {
  width: min(calc(100% - 2rem), 800px);
  margin-inline: auto;
}

/* Clamp with Min/Max */
.responsive-grid-gap {
  gap: clamp(0.5rem, min(3vw, 2rem), 3rem);
}

/* Complex Fluid Typography */
:root {
  --fluid-min: 1rem;
  --fluid-max: 1.5rem;
  --fluid-preferred: calc(var(--fluid-min) + 0.5vw);
}

.fluid-element {
  font-size: clamp(var(--fluid-min), var(--fluid-preferred), var(--fluid-max));
}

/* ============ Common Patterns ============ */

/* Responsive Image */
.responsive-image {
  width: min(100%, 800px);
  height: auto;
}

/* Sticky Footer Layout */
.page-content {
  min-height: calc(100vh - 60px - 80px); /* viewport - header - footer */
}

/* Aspect Ratio Box */
.aspect-box {
  width: min(100%, 600px);
  height: calc(min(100%, 600px) * 0.5625); /* 16:9 ratio */
}

/* Responsive Border Radius */
.adaptive-radius {
  border-radius: clamp(8px, 2vw, 24px);
}

/* ============ CSS Custom Properties ============ */

:root {
  /* Fluid scale */
  --space-xs: clamp(0.25rem, 0.5vw, 0.5rem);
  --space-sm: clamp(0.5rem, 1vw, 1rem);
  --space-md: clamp(1rem, 2vw, 2rem);
  --space-lg: clamp(2rem, 4vw, 4rem);
  --space-xl: clamp(4rem, 8vw, 8rem);

  /* Fluid typography */
  --font-sm: clamp(0.875rem, 0.8rem + 0.25vw, 1rem);
  --font-base: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
  --font-lg: clamp(1.25rem, 1rem + 1vw, 2rem);
  --font-xl: clamp(2rem, 1.5rem + 2vw, 4rem);

  /* Container widths */
  --container-sm: min(100%, 640px);
  --container-md: min(100%, 768px);
  --container-lg: min(100%, 1024px);
  --container-xl: min(100%, 1280px);
}

.component {
  padding: var(--space-md);
  font-size: var(--font-base);
  max-width: var(--container-lg);
}

/* ============ Browser Support ============ */
/*
 * clamp(): Chrome 79+, Firefox 75+, Safari 13.1+, Edge 79+
 * min()/max(): Chrome 79+, Firefox 75+, Safari 11.1+, Edge 79+
 * calc(): Chrome 26+, Firefox 16+, Safari 7+, Edge 12+
 *
 * All modern browsers support these functions.
 * For older browser support, provide fallbacks:
 */

.with-fallback {
  /* Fallback for older browsers */
  font-size: 18px;
  /* Modern browsers */
  font-size: clamp(16px, 4vw, 24px);
}

Reference

clamp()

Constrains a value between a minimum and maximum.

clamp(MIN, PREFERRED, MAX)

/* Example */
font-size: clamp(16px, 4vw, 24px);

/* Equivalent to */
font-size: max(16px, min(4vw, 24px));

min()

Returns the smallest of one or more values.

min(value1, value2, ...)

/* Example */
width: min(100%, 600px);

/* Element will be 100% width
   up to a maximum of 600px */

max()

Returns the largest of one or more values.

max(value1, value2, ...)

/* Example */
min-height: max(500px, 100vh);

/* Element will be at least
   500px or full viewport */

calc()

Performs mathematical calculations.

calc(expression)

/* Example */
width: calc(100% - 2rem);

/* Operators: +, -, *, /
   Spaces required around + and - */

Browser Support

  • clamp(): Chrome 79+, Firefox 75+, Safari 13.1+
  • min()/max(): Chrome 79+, Firefox 75+, Safari 11.1+
  • calc(): Chrome 26+, Firefox 16+, Safari 7+

Tips

  • Use clamp() for fluid typography
  • Use min() for max-width containers
  • Use max() for minimum sizes
  • Add + 0.5rem in clamp() for smoother scaling
  • Always provide fallbacks for older browsers

Rate this tool