HTML and CSS Functions & Calculations

HTML & CSS: Functions & Calculations

CSS functions let you compute values, blend colors, and respond to context without extra JavaScript.

Combine them with custom properties to build smart, responsive design systems.

Math helpers

• calc() - add, subtract, multiply, or divide units (e.g., width: calc(100% - 2rem);).
• min() / max() - pick the smallest or largest value.
• clamp(min, preferred, max) - constrain a value to a responsive range.

If you want to read more or get an in-depth understanding, see CSS calc() and CSS clamp() in the CSS tutorial.

Example: Fluid Spacing

This example builds a responsive spacing scale with clamp() and applies it to padding, margins, and radii via custom properties.

:root {
  --space-xs: clamp(0.5rem, 1vw, 0.75rem);
  --space-sm: clamp(0.75rem, 1.5vw, 1.125rem);
  --space-lg: clamp(1.5rem, 3vw, 2.5rem);
}
.card {
  padding: var(--space-lg);
  margin-block: var(--space-sm);
  border-radius: calc(var(--space-xs) * 2);
}

clamp(min, preferred, max) keeps spacing within bounds: it scales with viewport width but never shrinks below the minimum or grows beyond the maximum.

Color functions

• rgb(), hsl() accept decimals and alpha channels.
• color-mix() blends two colors with a defined percentage.
• color-contrast() (experimental) returns the best contrasting color.

If you want to read more or get an in-depth understanding, see RGB Colors and HSL Colors in the CSS tutorial.

Trigonometry & geometry

• Modern browsers support sin(), cos(), tan(), and hypot().
• Use them for animations, gradients, or polar positioning.
• Pair with custom properties for interactive charts.

Environment helpers

• env() exposes safe-area insets on mobile devices.
• var() fetches custom property values with optional fallbacks.
• attr() retrieves attribute values inside generated content.