CSS value functions
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.
Syntax
css
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.
Transform functions
The <transform-function>
CSS data type represent appearance transformation. It is used as a value of transform
property.
Translate functions
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.
Rotation functions
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.
Scaling functions
Skew functions
Matrix functions
matrix()
-
Describes a homogeneous 2D transformation matrix.
matrix3d()
-
Describes a 3D transformation as a 4×4 homogeneous matrix.
Perspective functions
perspective()
-
Sets the distance between the user and the z=0 plane.
Math functions
The math functions allow CSS numeric values to be written as mathematical expressions.
Basic arithmetic
calc()
-
Performs basic arithmetic calculations on numerical values.
Comparison functions
Stepped value functions
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.
Trigonometric functions
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.
Exponential functions
Sign-related functions
Filter functions
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.
Color functions
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.
Image functions
Gradient functions
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 functions
image()
Experimental-
Defines an
<image>
in a similar fashion to theurl()
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.
Counter functions
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.
Shape functions
The <basic-shape>
CSS data type represents a graphical shape. It is used in the clip-path
, offset-path
, and shape-outside
properties.
Reference functions
The following functions are used as a value of properties to reference a value defined elsewhere.
Grid functions
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.
Font functions
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
, likesalt 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 asss02
. 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 valuecvXY
, such ascv02
. swash()
-
Enables swash glyphs. The parameter is a font-specific name mapped to a number. It corresponds to the OpenType values
swsh
andcswh
, such asswsh 2
andcswh 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 asornm 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 asnalt 2
.
Easing functions
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.
Animation functions
The following functions are used as a value of different animation-timeline
properties. See animation-timeline
for more details about these.
scroll()
-
Sets the
animation-timeline
of an element to an anonymous scroll progress timeline. view()
-
Sets the
animation-timeline
of an element to an anonymous view progress timeline.