CSS Functions
What are CSS Functions?
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.
| 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() — 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)
);
}/* 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
);
}