CSS References
CSS Functions Reference
A CSS function returns a value you can use inside a declaration — a computed length, a colour, a gradient, a transform, or the value of a custom property. Functions make stylesheets dynamic and responsive without JavaScript. This reference groups the most useful functions by category with syntax and a description.
Maths and sizing functions
| Function | Example | Description |
|---|---|---|
| calc() | calc(100% - 32px) | Performs arithmetic mixing units. |
| min() | min(90vw, 1200px) | Returns the smallest of its arguments. |
| max() | max(320px, 40%) | Returns the largest of its arguments. |
| clamp() | clamp(1rem, 2vw, 2rem) | Clamps a value between a min and max (fluid sizing). |
| round() | round(15px, 4px) | Rounds a value to a step. |
| mod() | mod(7, 3) | Returns the modulus (remainder). |
| rem() | rem(7, 3) | Returns the remainder. |
Variables and attributes
| Function | Example | Description |
|---|---|---|
| var() | var(--brand, teal) | Reads a custom property, with an optional fallback. |
| env() | env(safe-area-inset-top) | Reads an environment value like device safe areas. |
| attr() | attr(data-label) | Reads an HTML attribute value (mainly in content). |
| counter() | counter(item) | Outputs the value of a CSS counter. |
Colour functions
| Function | Example | Description |
|---|---|---|
| rgb() | rgb(15 118 110) | Colour from red, green, blue channels. |
| rgba() | rgba(15,118,110,0.5) | RGB colour with an alpha (opacity) channel. |
| hsl() | hsl(174 66% 40%) | Colour from hue, saturation, lightness. |
| hsla() | hsla(174,66%,40%,0.5) | HSL colour with alpha. |
| hwb() | hwb(174 10% 20%) | Colour from hue, whiteness, blackness. |
| oklch() | oklch(70% 0.1 174) | Perceptually uniform colour (modern). |
| color-mix() | color-mix(in srgb, red, blue) | Mixes two colours together. |
Image and gradient functions
| Function | Example | Description |
|---|---|---|
| url() | url("hero.jpg") | References an external resource such as an image or font. |
| linear-gradient() | linear-gradient(to right, #0f766e, #14b8a6) | A gradient along a straight line. |
| radial-gradient() | radial-gradient(circle, #fff, #000) | A gradient radiating from a point. |
| conic-gradient() | conic-gradient(from 0deg, red, blue) | A gradient rotating around a centre. |
| repeating-linear-gradient() | repeating-linear-gradient(45deg, #eee 0 10px, #fff 10px 20px) | A repeating striped gradient. |
| image-set() | image-set("a.webp" 1x, "a@2x.webp" 2x) | Chooses an image by display resolution. |
Transform and animation functions
| Function | Example | Description |
|---|---|---|
| translate() | translate(10px, 20px) | Moves an element on the X and Y axes. |
| translateX() / translateY() | translateY(-4px) | Moves along a single axis. |
| scale() | scale(1.1) | Scales an element up or down. |
| rotate() | rotate(45deg) | Rotates an element. |
| skew() | skew(10deg) | Slants an element. |
| cubic-bezier() | cubic-bezier(0.4, 0, 0.2, 1) | Defines a custom easing curve. |
| steps() | steps(4, end) | A stepped timing function for animations. |
💡
clamp(min, preferred, max) is the single most useful function for fluid, responsive typography and spacing — it grows with the viewport but never past your limits.
:root { --brand: #0f766e; }
h1 {
color: var(--brand);
font-size: clamp(1.5rem, 4vw, 3rem);
width: min(100% - 2rem, 60ch);
}