CSS Functions

What Are CSS Functions?

CSS functions perform calculations directly in CSS to make styles more flexible and responsive.

1. calc() — Do Math in CSS

Allows you to add, subtract, multiply, or divide values with different units.

• Syntax:

width: calc(100% - 50px);

• Example

Useful when mixing % and px:
.container {
  width: calc(100% - 2rem);
  margin-left: calc(1em + 10px);
}

2. clamp() — Responsive Values with Limits

Defines a value that can grow or shrink, but stays within a min and max.

• Syntax:

font-size: clamp(min, preferred, max);

• Example

h1 {
  font-size: clamp(1rem, 5vw, 3rem);
}

This sets font size based on screen width (5vw) but never smaller than 1rem or larger than 3rem.

3. min() — Choose the Smaller Value

Sets a value based on the smallest of two or more values.

• Example:

.container {
  width: min(90%, 600px);
}

Use this to limit width on large screens while being fluid on smaller screens.

4. max() — Choose the Larger Value

Sets a value based on the largest of two or more values.

• Example:

.sidebar {
  width: max(200px, 20%);
}

Ensures a minimum width, even on small screens.