CSS Functions

attr()

Retrieves the value of an HTML attribute and uses it in CSS.

calc()

Performs arithmetic operations on numeric values, mixing units.

clamp()

Clamps a value between a minimum, preferred, and maximum.

conic-gradient()

Creates a gradient that rotates around a center point, like a color wheel.

counter()

Returns the current value of a named CSS counter.

cubic-bezier()

Defines a custom easing curve for CSS transitions and animations.

env()

Inserts the value of a user-agent environment variable, like safe area insets on mobile.

fit-content()

Sizes a grid track to fit its content, clamped to a maximum value.

format()

Hints at the font format in @font-face src declarations to help browsers load the right file.

hsl()

Defines a color using hue, saturation, lightness, and optional alpha.

image-set()

Provides multiple image options based on screen resolution, letting the browser pick the best one.

linear-gradient()

Creates a progressive transition between colors along a straight line.

max()

Returns the largest of a list of comma-separated values.

min()

Returns the smallest of a list of comma-separated values.

minmax()

Sets a minimum and maximum size for a grid track.

oklch()

Defines a color using the perceptually uniform OKLCh color space — lightness, chroma, and hue.

radial-gradient()

Creates a gradient that radiates outward from a central point.

repeat()

Repeats a grid track pattern a specified number of times.

rgb()

Defines a color using red, green, blue, and optional alpha (transparency).

rotate()

Rotates an element clockwise or counterclockwise by a given angle.

scale()

Scales an element larger or smaller around its transform origin.

skew()

Skews an element along the X and/or Y axis.

translate()

Moves an element horizontally and/or vertically without affecting document flow.

url()

Inserts an external resource such as an image, font, or SVG.

var()

Inserts the value of a CSS custom property (variable).