CSS Functions
CSS functions return computed values used as property values. Below is the practical short list.
Math
| Function | Returns |
|---|---|
calc() | Result of an arithmetic expression with mixed units. |
min() / max() | Smallest / largest of its arguments. |
clamp(min, ideal, max) | Ideal clamped between min and max. |
round() / mod() / rem() | Rounding, modulo, remainder. |
Colour
| Function | Returns |
|---|---|
rgb() / rgba() | Red-green-blue colour. |
hsl() / hsla() | Hue-saturation-lightness colour. |
oklch() / oklab() | Perceptually-uniform colour. |
color-mix() | Blend of two colours. |
Layout & sizing
| Function | Returns |
|---|---|
var(--name, fallback) | Value of a custom property. |
attr(name) | Attribute value as a string (mostly inside content). |
repeat(n, track) | Repeats a grid track pattern. |
minmax(min, max) | Track that can be between two sizes. |
fit-content(value) | Sized to the content, capped at value. |
Effects
| Function | Returns |
|---|---|
linear-gradient() / radial-gradient() / conic-gradient() | Gradient images. |
translate(), scale(), rotate(), skew() | 2D/3D transforms. |
blur(), brightness(), contrast(), grayscale() | Filter primitives. |
cubic-bezier(...) | Custom easing curve. |
Example
Example
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: Verdana, sans-serif; }
.box { background: #04AA6D; color: #fff; padding: 20px; border-radius: 6px; }
</style>
</head>
<body>
<h1>CSS Functions</h1>
<div class="box">Edit the CSS on the left, then click Run »</div>
</body>
</html>
Try it Yourself »
Exercise
Read a custom property.
background:
(--brand);
Three letters.
Discussion
Loading…