CSS functions are used as a value for various properties. They take input, perform a calculation or look up a value, and return the result to the property.
These functions solve common problems in layout and design.
| Function | Description |
|---|---|
calc() |
Performs calculations to determine property values (e.g., mixing units). |
var() |
Inserts the value of a custom property (variable). |
url() |
Points to an external file (e.g., images or fonts). |
rgb() / rgba() |
Defines colors using Red-Green-Blue-Alpha channels. |
linear-gradient() |
Creates a background consisting of a progressive transition between colors. |
/* Responsive width calculation */
.box {
width: calc(100% - 40px);
}
/* Using a custom variable */
:root { --main-color: green; }
.text { color: var(--main-color); }
/* Applying a gradient */
.hero {
background: linear-gradient(to right, red, yellow);
}calc() function is extremely powerful for mixed units (e.g., 100vh - 50px to account for a fixed header).