selector {
  property: function([argument]? [, argument]!);
}

The value syntax starts with the name of the function, followed by a left parenthesis (. Next up are the argument(s), and the function is finished off with a closing parenthesis ).

Functions can take multiple arguments, which are formatted similarly to CSS property values. Whitespace is allowed, but they are optional inside the parentheses. In some functional notations multiple arguments are separated by commas, while others use spaces.

The <transform-function> CSS data type represent appearance transformation. It is used as a value of transform property.

translateX()

Translates an element horizontally.

translateY()

Translates an element vertically.

translateZ()

Translates an element along the z-axis.

translate()

Translates an element on the 2D plane.

translate3d()

Translates an element in 3D space.

rotateX()

Rotates an element around the horizontal axis.

rotateY()

Rotates an element around the vertical axis.

rotateZ()

Rotates an element around the z-axis.

rotate()

Rotates an element around a fixed point on the 2D plane.

rotate3d()

Rotates an element around a fixed axis in 3D space.

scaleX()

Scales an element up or down horizontally.

scaleY()

Scales an element up or down vertically.

scaleZ()

Scales an element up or down along the z-axis.

scale()

Scales an element up or down on the 2D plane.

scale3d()

Scales an element up or down in 3D space.

skewX()

Skews an element in the horizontal direction.

skewY()

Skews an element in the vertical direction.

skew()

Skews an element on the 2D plane.

matrix()

Describes a homogeneous 2D transformation matrix.

matrix3d()

Describes a 3D transformation as a 4×4 homogeneous matrix.

perspective()

Sets the distance between the user and the z=0 plane.

The math functions allow CSS numeric values to be written as mathematical expressions.

calc()

Performs basic arithmetic calculations on numerical values.

min()

Calculates the smallest of a list of values.

max()

Calculates the largest of a list of values.

clamp()

Calculates the central of a minimum, central, and maximum values.

round() Experimental

Calculates a rounded number based on a rounding strategy.

mod() Experimental

Calculates a modulus (with the same sign as the divisor) when dividing one number by another.

rem() Experimental

Calculates a remainder (with the same sign as the dividend) when dividing one number by another.

sin()

Calculates the trigonometric sine of a number.

cos()

Calculates the trigonometric cosine of a number.

tan()

Calculates the trigonometric tangent of a number.

asin()

Calculates the trigonometric inverse sine of a number.

acos()

Calculates the trigonometric inverse cosine of a number.

atan()

Calculates the trigonometric inverse tangent of a number.

atan2()

Calculates the trigonometric inverse tangent of two-numbers in a plane.

pow() Experimental

Calculates the base raised to the power of a number.

sqrt() Experimental

Calculates the square root of a number.

hypot() Experimental

Calculates the square root of the sum of the squares of its arguments.

log() Experimental

Calculates the logarithm of a number.

exp() Experimental

Calculates e raised to the power of a number.

abs() Experimental

Calculates the absolute value of a number.

sign() Experimental

Calculates the sign (positive or negative) of the number.

The <filter-function> CSS data type represents a graphical effect that can change the appearance of an input image. It is used in the filter and backdrop-filter properties.

blur()

Increases the image gaussian blur.

brightness()

Brightens or darkens an image.

contrast()

Increases or decreases the image contrast.

drop-shadow()

Applies a drop shadow behind an image.

grayscale()

Converts an image to grayscale.

hue-rotate()

Changes the overall hue of an image.

invert()

Inverts the colors of an image.

opacity()

Adds transparency to an image.

saturate()

Changes the overall saturation of an image.

sepia()

Increases the sepia of an image.

The <color> CSS data type specifies different color representations.

rgb()

Defines a given color according to its red, green, blue and alpha (transparency) components.

hsl()

Defines a given color according to its hue, saturation, lightness and alpha (transparency) components.

hwb()

Defines a given color according to its hue, whiteness and blackness components.

lch() Experimental

Defines a given color according to its lightness, chroma and hue components.

oklch() Experimental

Defines a given color according to its lightness, chroma, hue and alpha (transparency) components.

lab() Experimental

Defines a given color according to its lightness, a-axis distance and b-axis distance in the lab colorspace.

oklab() Experimental

Defines a given color according to its lightness, a-axis distance, b-axis distance in the lab colorspace and alpha (transparency).

color() Experimental

Specifies a particular, specified colorspace rather than the implicit sRGB colorspace.

color-mix() Experimental

Mixes two color values in a given colorspace by a given amount.

color-contrast() Experimental

Selects the highest color contrast from a list of colors, compare to a base color value.

device-cmyk() Experimental

Defines CMYK colors in a device-independent way.

The <image> CSS data type provides graphical representation of images or gradients.

linear-gradient()

Linear gradients transition colors progressively along an imaginary line.

radial-gradient()

Radial gradients transition colors progressively from a center point (origin).

conic-gradient()

Conic gradients transition colors progressively around a circle.

repeating-linear-gradient()

Is similar to linear-gradient() and takes the same arguments, but it repeats the color stops infinitely in all directions so as to cover its entire container.

repeating-radial-gradient()

Is similar to radial-gradient() and takes the same arguments, but it repeats the color stops infinitely in all directions so as to cover its entire container.

repeating-conic-gradient()

Is similar to conic-gradient() and takes the same arguments, but it repeats the color stops infinitely in all directions so as to cover its entire container.

image() Experimental

Defines an <image> in a similar fashion to the url() function, but with added functionality including specifying the image's directionality and fallback images for when the preferred image is not supported.

image-set()

Picks the most appropriate CSS image from a given set, primarily for high pixel density screens.

cross-fade()

Blends two or more images at a defined transparency.

element() Experimental

Defines an <image> value generated from an arbitrary HTML element.

paint()

Defines an <image> value generated with a PaintWorklet.

CSS counter functions are generally used with the content property, although in theory, they may be used wherever a <string> is supported.

counter()

Returns a string representing the current value of the named counter if there is one.

counters()

Enables nested counters, returning a concatenated string representing the current values of the named counters, if there are any.

symbols()

Defines the counter styles inline, directly as the value of a property.

The <basic-shape> CSS data type represents a graphical shape. It is used in the clip-path, offset-path, and shape-outside properties.

circle()

Defines a circle shape.

ellipse()

Defines an ellipse shape.

inset()

Defines an inset rectangle shape.

polygon()

Defines a polygon shape.

path()

Accepts an SVG path string to enable a shape to be drawn.

The following functions are used as a value of properties to reference a value defined elsewhere.

attr()

Uses the attributes defined on HTML element.

env()

Uses the user-agent defined as environment variable.

url()

Uses a file from the specified URL.

var()

Uses the custom property value instead of any part of a value of another property.

The following functions are used to define a CSS Grid.

fit-content()

Clamps a given size to an available size according to the formula min(maximum size, max(minimum size, argument)).

minmax()

Defines a size range greater-than or equal-to min and less-than or equal-to max.

repeat()

Represents a repeated fragment of the track list, allowing a large number of columns or rows that exhibit a recurring pattern.

CSS font functions are used with the font-variant-alternates property to control the use of alternate glyphs.

stylistic()

Enables stylistic alternates for individual characters. The parameter is a font-specific name mapped to a number. It corresponds to the OpenType value salt, like salt 2.

styleset()

Enables stylistic alternatives for sets of characters. The parameter is a font-specific name mapped to a number. It corresponds to the OpenType value ssXY, such as ss02.

character-variant()

Enables specific stylistic alternatives for characters. It is similar to styleset(), but doesn't create coherent glyphs for a set of characters; individual characters will have independent and not necessarily coherent styles. The parameter is a font-specific name mapped to a number. It corresponds to the OpenType value cvXY, such as cv02.

swash()

Enables swash glyphs. The parameter is a font-specific name mapped to a number. It corresponds to the OpenType values swsh and cswh, such as swsh 2 and cswh 2.

ornaments()

Enables ornaments such as fleurons and other dingbat glyphs. The parameter is a font-specific name mapped to a number. It corresponds to the OpenType value ornm, such as ornm 2.

annotation()

Enables annotations such as circled digits or inverted characters. The parameter is a font-specific name mapped to a number. It corresponds to the OpenType value nalt, such as nalt 2.

The following functions are used as a value in transition and animation properties.

cubic-bezier()

Easing function that defines a cubic Bézier curve.

steps()

Iteration along a specified number of stops along the transition, displaying each stop for equal lengths of time.

The following functions are used as a value of different animation properties.

scroll() Experimental

Sets the animation-timeline of an element to depend on scrollbar on a particular axis of either the nearest parent (with that scrollbar), or the root container.

• CSS Values and Units
• Introduction to CSS: Values and Units