CSS Reference
CSS Functions
Recognize common CSS functions for values, colors, images, transforms, filters, shapes, counters, and environment data. It maps functions for variables, math, colors, images, transforms, filters, shapes, Grid sizing, counters, attributes, and environment values.
A CSS function calculates or constructs part of a property value. Its name may be valid while its arguments-or its position in that particular property-remain invalid.
Functions let CSS defer decisions until the browser knows variables, available size, active color space, environment insets, or resource resolution. They are composable: a custom property can feed a color mix, and a calculated value can become one boundary of a clamp. This topic also connects with CSS Math Functions and Modern Colors.
Common function families
- Variables and environment:
var(),env(),attr() - Math:
calc(),min(),max(),clamp(),round() - Color:
rgb(),hsl(),oklch(),color(),color-mix(),light-dark() - Images:
url(),image-set(), gradient functions - Transforms:
translate(),rotate(),scale(),matrix(),perspective() - Filters:
blur(),brightness(),contrast(),drop-shadow() - Shapes:
circle(),ellipse(),inset(),polygon(),path() - Grid and sizing:
repeat(),minmax(),fit-content() - Generated values:
counter(),counters()
Example
css
.hero {
padding: max(1rem, env(safe-area-inset-left));
width: min(100% - 2rem, 72rem);
background-image: image-set(
url("hero.webp") type("image/webp") 1x,
url("hero@2x.webp") type("image/webp") 2x
);
}Functions are parsed in the context of a property. A function can be valid CSS syntax yet invalid for the property or value position where it appears.
Common CSS Functions
| Function | Category | Example |
|---|---|---|
| var() | Custom properties | var(--accent, blue) |
| clamp() | Math | clamp(1rem, 2vw, 2rem) |
| color-mix() | Color | color-mix(in oklch, blue, white) |
| linear-gradient() | Image | linear-gradient(to right, red, blue) |
| translate() | Transform | translate(1rem, 0) |
Complete Example
Run the complete document below in the Try It editor. Resize the preview or interact with the controls where the example calls for it.
Complete runnable example
html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS Functions example</title>
<style>
* { box-sizing: border-box; }
body {
margin: 0;
padding: 2rem;
font-family: system-ui, sans-serif;
line-height: 1.5;
}
main { max-width: 70rem; margin-inline: auto; }
article, section, aside, form, .card, .panel {
padding: 1rem;
border: 1px solid #cbd5e1;
border-radius: 0.6rem;
}
.hero {
padding: max(1rem, env(safe-area-inset-left));
width: min(100% - 2rem, 72rem);
background-image: image-set(
url("hero.webp") type("image/webp") 1x,
url("hero@2x.webp") type("image/webp") 2x
);
}
</style>
</head>
<body>
<main class="hero"><h1>CSS functions</h1><p>This container uses min(), max(), env(), and image-set().</p></main>
</body>
</html>Browser Support
Feature | Chrome | Edge | Firefox | Safari |
|---|---|---|---|---|
| calc() | 26 | 12 | 16 | 7 |
| color-mix() | 111 | 111 | 113 | 16.2 |
Versions show the first stable desktop release with unprefixed support. Data source: MDN Browser Compatibility Data 8.0.8. A partial-support note is included where it changes how the example behaves.
Notes
- Test the example with real content, keyboard input, browser zoom, and the narrowest layout your project supports.
- Use a fallback when the support table shows that one of your required browsers predates the feature.
Conclusion
A CSS function is useful only when both its arguments and its position in the property value are valid.
Read functions inside the grammar of the property that contains them. Validate units and argument types, keep nested expressions understandable, and provide fallbacks when a newer function is central to readability or layout in browsers the project still supports.