files/en-us/web/css/reference/values/functions/index.md
CSS value functions are statements that invoke special data processing or calculations to return a CSS value for a CSS property. CSS value functions represent more complex data types and they may take some input arguments to calculate the return value.
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.
[!NOTE] The CSS value functions are used as property values and should not be confused with pseudo-classes. The functional pseudo-classes, linguistic pseudo-classes, and several tree-structural pseudo-classes require parameter values, but they're not value functions. The conditional at-rules are also not value functions; the parentheses are used for groupings.
The {{CSSxRef("<transform-function>")}} CSS data type represent appearance transformation. It is used as a value of {{CSSxRef("transform")}} property.
The math functions allow CSS numeric values to be written as mathematical expressions.
Each of the pages below contains detailed information about a math function's syntax, browser compatibility data, examples, and more. For a holistic introduction to CSS math functions, see Using CSS math functions.
auto, fit-content, and max-content, which are not supported by the calc() function.e raised to the power of a number.The {{cssxref("filter-function")}} CSS data type represents a graphical effect that can change the appearance of an input image. It is used in the {{CSSxRef("filter")}} and {{CSSxRef("backdrop-filter")}} properties.
The {{CSSxRef("color_value","<color>")}} CSS data type specifies different color representations.
The {{cssxref("image")}} CSS data type provides graphical representation of images or gradients.
linear-gradient() and takes the same arguments, but it repeats the color stops infinitely in all directions so as to cover its entire container.radial-gradient() and takes the same arguments, but it repeats the color stops infinitely in all directions so as to cover its entire container.conic-gradient() and takes the same arguments, but it repeats the color stops infinitely in all directions so as to cover its entire container.CSS counter functions are generally used with the {{CSSxRef("content")}} property, although in theory, they may be used wherever a {{CSSxRef("<string>")}} is supported.
The {{cssxref("basic-shape")}} CSS data type represents a graphical shape. It is used in the {{CSSxRef("clip-path")}}, {{CSSxRef("offset-path")}}, and {{CSSxRef("shape-outside")}} properties.
The following functions are used as a value of properties to reference a value defined elsewhere:
The following functions are used to define a CSS grid:
min(maximum size, max(minimum size, argument)).CSS font functions are used with the {{CSSxRef("font-variant-alternates")}} property to control the use of alternate glyphs.
salt, like salt 2.ssXY, such as ss02.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.swsh and cswh, such as swsh 2 and cswh 2.ornm, such as ornm 2.nalt, such as nalt 2.The {{cssxref("easing-function")}} CSS data type represents a mathematical function. It is used in transition and animation properties:
The following functions are used as a value of different {{CSSxRef("animation-timeline")}} properties:
The anchor positioning functions are used when positioning and sizing anchor-positioned elements relative to the location and size of their associated anchor elements.
The following functions return an integer value based on the DOM tree, rather than the flat tree like most CSS values do: