CSS functions compute values at used-value time: math, color, gradient, filter and variable resolution.
Math Functions
CSS Functions
Description
calc()
Performs calculations with mixed units, e.g. width: calc(100% - 20px).
min()
Returns the smallest of a list of values.
max()
Returns the largest of a list of values.
clamp()
Clamps a value between a min and max: clamp(MIN, VAL, MAX).
Color Functions
CSS Functions
Description
rgb()
Defines a color from red, green, blue channels (0-255).
rgba()
Like rgb() plus an alpha (opacity) channel 0-1.
hsl()
Defines a color by hue, saturation, lightness.
hwb()
Defines a color by hue, whiteness, blackness.
color-mix()
Blends two colors in a given color space.
Gradient Functions
CSS Functions
Description
linear-gradient()
Creates a gradient along a straight line.
radial-gradient()
Creates a gradient radiating from a center.
conic-gradient()
Creates a gradient rotated around a center point.
Variables & Misc
CSS Functions
Description
var()
Inserts the value of a custom property, e.g. var(--main).
url()
References a resource such as an image or font file.
attr()
Reads the value of an attribute on the element (limited use).
Web-Tutorial Tech Team
A team of developers maintaining programming tutorials. Each tutorial is written and reviewed by developers with expertise in that field. We work to keep our content accurate and reliable — if you spot an issue, please let us know.
