Lesson 15: CSS Math Functions

What You'll Learn

Master calc() for mixing units and performing arithmetic operations
Use min(), max(), and clamp() for responsive constraints
Apply round(), mod(), and rem() for rounding and modulo operations
Create circular layouts with sin(), cos(), and tan()
Utilize pow(), sqrt(), and hypot() for exponential calculations
Build fluid typography and spacing systems without media queries
Understand browser support and when to use each function
Create dynamic, mathematical designs with pure CSS

Introduction to CSS Math

CSS math functions transform how we approach responsive design. Instead of fixed values and breakpoints, we can create fluid, mathematical relationships that adapt naturally.

Modern CSS includes functions for:

Arithmetic - calc() for mixing units and calculations
Comparison - min(), max(), clamp() for constraints
Rounding - round(), mod(), rem() for intervals and patterns
Trigonometry - sin(), cos(), tan() for circular layouts
Exponential - pow(), sqrt(), hypot() for scaling and distance

Basic Functions: calc(), min(), max(), clamp()

These functions form the foundation of mathematical CSS and have excellent browser support.

/* calc() - Mix units and perform arithmetic */ width: calc(100% - 4rem); height: calc(100vh - 80px); margin: calc(1rem + 2px); /* min() - Choose the smallest value */ width: min(600px, 100%); /* Never wider than 600px */ font-size: min(5vw, 2rem); /* Caps at 2rem */ /* max() - Choose the largest value */ width: max(300px, 50%); /* At least 300px */ font-size: max(16px, 1rem); /* Minimum 16px */ /* clamp() - Constrain between min and max */ font-size: clamp(1rem, 2.5vw, 2rem); /* min preferred max */ padding: clamp(1rem, 3vw, 3rem); gap: clamp(0.5rem, 2vw, 2rem);

Trigonometric Functions: sin(), cos(), tan()

CSS trigonometric functions enable circular layouts, wave patterns, and geometric designs that would previously require JavaScript.

/* Position items in a circle */ .item { --angle: calc(360deg / 8 * var(--index)); --radius: 120px; left: calc(50% + var(--radius) * cos(var(--angle))); top: calc(50% + var(--radius) * sin(var(--angle))); } /* Create wave patterns */ .wave-dot:nth-child(1) { transform: translateY(calc(sin(0deg) * 30px)); } .wave-dot:nth-child(2) { transform: translateY(calc(sin(20deg) * 30px)); } /* Angle calculations with tangent */ transform: skewX(calc(tan(15deg))); /* All trig functions available: */ sin(45deg) /* Sine */ cos(90deg) /* Cosine */ tan(30deg) /* Tangent */ asin(0.5) /* Arcsine */ acos(0.5) /* Arccosine */ atan(1) /* Arctangent */ atan2(y, x) /* Two-argument arctangent */

Rounding Functions: round(), mod(), rem()

Rounding functions enable precise control over intervals, patterns, and mathematical cycles.

/* round() - Round to nearest interval */ width: round(nearest, 33%, 10%); /* Rounds 33% to 30% */ width: round(down, 48%, 10%); /* Rounds 48% to 40% */ width: round(up, 31%, 10%); /* Rounds 31% to 40% */ width: round(to-zero, -15%, 10%); /* Rounds -15% to -10% */ /* Practical: Grid columns rounded to 5% */ grid-template-columns: repeat(auto-fit, minmax(round(down, 31%, 5%), 1fr) ); /* mod() - Modulo/remainder operation */ width: mod(19px, 5px); /* = 4px (19 = 3*5 + 4) */ width: mod(140deg, 90deg); /* = 50deg */ /* Create color patterns */ --index: 7; hue: mod(calc(var(--index) * 45deg), 360deg); /* rem() - Remainder (like mod() but different for negatives) */ width: rem(19px, 5px); /* = 4px */

Exponential Functions: pow(), sqrt(), hypot()

Exponential functions enable power calculations, square roots, and distance measurements for mathematical scaling and geometry.

/* pow() - Power/exponentiation */ width: calc(pow(2, 3) * 10px); /* 2³ * 10px = 80px */ height: calc(pow(var(--scale), 2) * 1rem); /* sqrt() - Square root */ width: calc(sqrt(144) * 1px); /* √144 = 12px */ border-radius: calc(sqrt(var(--area)) / 2); /* hypot() - Hypotenuse: √(a² + b²) */ width: hypot(300px, 200px); /* √(300² + 200²) ≈ 360px */ /* 3D distance */ length: hypot(10px, 20px, 30px); /* Diagonal of a square */ diagonal: hypot(100px, 100px); /* ≈ 141.4px */ /* exp() and log() also available */ opacity: calc(exp(-2)); /* e^-2 ≈ 0.135 */ width: calc(log(100) * 10px); /* ln(100) * 10px */

Fluid Typography and Spacing

Combine math functions to create fully fluid designs that scale smoothly without media queries.

/* Fluid typography system */ :root { --min-width: 320px; --max-width: 1200px; --min-font: 16px; --max-font: 20px; font-size: clamp( var(--min-font), calc(var(--min-font) + (var(--max-font) - var(--min-font)) * ((100vw - var(--min-width)) / (var(--max-width) - var(--min-width)))), var(--max-font) ); } /* Fluid headings */ h1 { font-size: clamp(1.5rem, 5vw, 4rem); } h2 { font-size: clamp(1.25rem, 3vw, 2.5rem); } h3 { font-size: clamp(1rem, 2.5vw, 2rem); } /* Fluid spacing */ .section { padding-block: clamp(2rem, 5vw, 5rem); gap: clamp(1rem, 3vw, 3rem); } /* Responsive container */ .container { width: min(1200px, 100% - 4rem); margin-inline: auto; } /* Responsive grid */ .grid { grid-template-columns: repeat( auto-fit, minmax(clamp(200px, 30vw, 400px), 1fr) ); gap: clamp(0.5rem, 2vw, 2rem); }

Function Reference

Complete overview of CSS math functions with browser support:

Function	Syntax	Use Case	Browser Support
`calc()`	`calc(100% - 2rem)`	Basic arithmetic, mix units	✅ All browsers
`min()`	`min(500px, 100%)`	Responsive max-width	✅ Chrome 79+, Firefox 75+, Safari 13.1+
`max()`	`max(300px, 50%)`	Responsive min-width	✅ Chrome 79+, Firefox 75+, Safari 13.1+
`clamp()`	`clamp(1rem, 2vw, 3rem)`	Fluid typography, spacing	✅ Chrome 79+, Firefox 75+, Safari 13.1+
`round()`	`round(nearest, 33%, 10%)`	Round to intervals	⚠️ Chrome 125+, Firefox 118+
`mod()`	`mod(18px, 5px)`	Modulo/patterns	⚠️ Chrome 125+, Firefox 118+
`rem()`	`rem(18px, 5px)`	Remainder operations	⚠️ Chrome 125+, Firefox 118+
`sin()`	`sin(45deg)`	Circular layouts, waves	⚠️ Chrome 111+, Firefox 108+, Safari 15.4+
`cos()`	`cos(90deg)`	Circular layouts	⚠️ Chrome 111+, Firefox 108+, Safari 15.4+
`tan()`	`tan(30deg)`	Slopes, angles	⚠️ Chrome 111+, Firefox 108+, Safari 15.4+
`pow()`	`pow(2, 3)`	Exponential scaling	⚠️ Chrome 125+, Firefox 118+
`sqrt()`	`sqrt(144)`	Square roots	⚠️ Chrome 125+, Firefox 118+
`hypot()`	`hypot(3, 4)`	Distance calculations	⚠️ Chrome 125+, Firefox 118+

Key Takeaways

calc() is the foundation - mix units and perform arithmetic operations
min() and max() eliminate many media queries for responsive constraints
clamp() is perfect for fluid typography and spacing - smooth scaling without breakpoints
Trigonometric functions (sin, cos, tan) enable circular layouts and geometric patterns
Exponential functions (pow, sqrt, hypot) handle scaling and distance calculations
Rounding and modulo functions (round, mod, rem) are cutting-edge with limited support
Combine functions for powerful fluid design systems without JavaScript
Production-ready functions: calc, min, max, clamp - use confidently
Modern functions: trigonometry and exponential - use with feature detection and fallbacks
Math functions are performant - calculated once by the browser, no JS overhead