CSS Functions calc, min, max, clamp

What are CSS Functions?

CSS functions let values respond to the page instead of staying fixed. They can calculate sizes, choose safe limits, read custom properties, create colors, load assets, and generate visual effects.

The most useful functions for everyday layout are calc(), min(), max(), and clamp(). Together they help you avoid many unnecessary media queries. For example, clamp() can make a heading grow on large screens while still keeping a readable minimum and maximum size.

CSS functions are built-in utilities that compute values dynamically. They are used as property values and can perform calculations, select from ranges, reference variables, and more.

They look like JavaScript functions, but they are evaluated by the browser's CSS engine. The result must still be a valid CSS value for the property where it is used.

Function	Purpose	Example
calc()	Mathematical calculations	width: calc(100% - 40px)
min()	Smallest of given values	width: min(500px, 100%)
max()	Largest of given values	font-size: max(16px, 2vw)
clamp()	Value between min and max	font-size: clamp(1rem, 2vw, 2rem)
var()	Use CSS custom property	color: var(--primary)
rgb() / rgba()	Color from RGB values	color: rgb(52, 152, 219)
hsl() / hsla()	Color from HSL values	color: hsl(210, 70%, 50%)
linear-gradient()	Linear color gradient	background: linear-gradient(to right, red, blue)
radial-gradient()	Radial color gradient	background: radial-gradient(circle, red, blue)
url()	Reference a file	background: url('image.jpg')
attr()	Use HTML attribute value	content: attr(data-label)
counter()	CSS counter value	content: counter(section)

calc(), min(), max(), clamp()

/* calc() - mix units in calculations */
.sidebar {
    width: calc(100% - 300px);  /* full width minus sidebar */
}
.card {
    padding: calc(var(--spacing) * 2);
    margin: calc(10px + 2vw);
}
.grid-item {
    width: calc(33.333% - 20px);  /* 3 columns with 30px total gap */
}

/* min() - use the SMALLER value */
.container {
    width: min(1200px, 90%);  /* 1200px on large screens, 90% on small */
}
.image {
    width: min(400px, 100%);  /* never wider than 400px or its container */
}

/* max() - use the LARGER value */
.text {
    font-size: max(16px, 1.5vw);  /* at least 16px, grows with viewport */
}
.button {
    padding: max(10px, 1vw) max(20px, 2vw);
}

/* clamp(min, preferred, max) - responsive without media queries */
h1 {
    font-size: clamp(1.5rem, 5vw, 3rem);
    /* min: 1.5rem (24px), preferred: 5vw, max: 3rem (48px) */
}
.container {
    padding: clamp(16px, 4vw, 64px);
}
.hero {
    height: clamp(300px, 50vh, 600px);
}

/* Combining functions */
.responsive-grid {
    grid-template-columns: repeat(
        auto-fill,
        minmax(min(300px, 100%), 1fr)
    );
}

Gradient Functions

/* linear-gradient() */
.hero {
    background: linear-gradient(to right, #667eea, #764ba2);
    background: linear-gradient(135deg, #f093fb, #f5576c);
    background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.7));
}

/* Multiple color stops */
.rainbow {
    background: linear-gradient(
        to right,
        red, orange, yellow, green, blue, indigo, violet
    );
}

/* Gradient with positions */
.sharp {
    background: linear-gradient(
        to right,
        blue 0%, blue 50%,   /* solid blue for first half */
        red 50%, red 100%    /* solid red for second half */
    );
}

/* radial-gradient() */
.circle-bg {
    background: radial-gradient(circle, #3498db, #2c3e50);
    background: radial-gradient(ellipse at top, #e0c3fc, #8ec5fc);
}

/* conic-gradient() */
.pie-chart {
    background: conic-gradient(
        #e74c3c 0deg 120deg,
        #3498db 120deg 240deg,
        #2ecc71 240deg 360deg
    );
    border-radius: 50%;
}

/* repeating-linear-gradient() */
.stripes {
    background: repeating-linear-gradient(
        45deg,
        #f0f0f0,
        #f0f0f0 10px,
        #ddd 10px,
        #ddd 20px
    );
}

Choosing the Right Sizing Function

Use calc() when you need arithmetic, such as full width minus a fixed sidebar. Use min() when a value should never exceed a limit. Use max() when a value should never go below a limit. Use clamp() when you need a minimum, a flexible preferred value, and a maximum in one line.

calc(100% - 2rem) keeps spacing flexible while reserving exact room.
min(100%, 720px) creates a container that fits small screens and stops growing on large screens.
max(44px, 10vw) can enforce a minimum tap target or minimum visual size.
clamp(1rem, 2vw, 1.5rem) is ideal for responsive typography.

Responsive article without extra breakpoints

.article {
    width: min(100% - 32px, 760px);
    margin-inline: auto;
    padding-block: clamp(24px, 6vw, 72px);
}

.article h1 {
    font-size: clamp(2rem, 5vw, 4rem);
    line-height: 1.1;
}

.article p {
    font-size: max(1rem, 0.9vw);
}