CSS Functional Notation

CSS functional notation is a type of CSS value that can represent more complex data types or invoke special data processing or calculations.

Syntax

selector {
  property: functional-notation( [argument]? [, argument]! );
}

The syntax starts with the name of the functional notation, followed by a left parenthesis (. Next up are the notation 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.

Transform functions

These functions are used when the <transform-function> CSS data type is used as a value of transform.

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.
rotate(): Rotates an element around a fixed point on the 2D plane.
rotate3d(): Rotates an element around a fixed axis 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.
scale(): Scales an element up or down on the 2D plane.
scale3d(): Scales an element up or down 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.
skew(): Skews an element on the 2D plane.
skewx(): Skews an element in the horizontal direction.
skewy(): Skews an element in the vertical direction.
translate(): Translates an element on the 2D plane.
translate3d(): Translates an element in 3D space.
translatex(): Translates an element horizontally.
translatey(): Translates an element vertically.
translatez(): Translates an element along the z-axis.

Math functions

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

calc(): A math function that allows basic arithmetic to be performed on numerical CSS values.
clamp(): A comparison function that takes a minimum, central, and maximum value and represents its central calculation.
max(): A comparison function that represents the largest of a list of values.
min(): A comparison function that represents the smallest of a list of values.
abs(): Takes a calculation and returns the absolute value.
acos(): An inverse trigonometric function the angle returned must be normalized to the range [0deg, 180deg];.
asin(): An inverse trigonometric function the angle returned must be normalized to the range [-90deg, 90deg].
atan(): An inverse trigonometric function the angle returned must be normalized to the range [-90deg, 90deg].
atan2(): Contains two comma-separated calculations, A and B. A and B can resolve to any <number>, <dimension>, or <percentage>, but must have the same type, or else the function is invalid.
cos(): Contains a single calculation which must resolve to either a <number> or an <angle>.
exp(): Contains one calculation which must resolve to a <number>, and returns the same value as pow(e, A) as a <number>.
hypot(): Contains one or more comma-separated calculations, and returns the length of an N-dimensional vector with components equal to each of the calculations.
log(): Contains one or two calculations (representing the value to be logarithmed, and the base of the logarithm, defaulting to e), which must both resolve as a <number>, and returns the logarithm base B of the value A, as a <number>.
mod(): A modulus function that contains two calculations A and B, and returns the difference between A and the nearest integer multiple of B either above or below A.
pow(): Contains two comma-separated calculations A and B, both of which must resolve as a <number>, and returns the result of raising A to the power of B, returning the value as a <number>.
rem(): A modulus function that contains two calculations A and B, and returns the difference between A and the nearest integer multiple of B either above or below A.
round(): Contains an optional rounding strategy, and two calculations A and B, and returns the value of A, rounded according to the rounding strategy, to the nearest integer multiple of B either above or below A.
sign(): Takes a calculation and returns -1 if the numeric value is negative, +1 if the numeric value is positive, 0⁺ if the numeric value is 0⁺, and 0⁻ if the numeric value is 0⁻.
sin(): Contains a single calculation which must resolve to either a <number> or an <angle>.
sqrt(): Contains a single calculation which must resolve to a <number>, and returns the square root of the value as a <number>.
tan(): Contains a single calculation which must resolve to either a <number> or an <angle>.

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(): Blurs the image.
brightness(): Makes the image brighter or darker.
contrast(): Increases or decreases the image's contrast.
drop-shadow(): Applies a drop shadow behind the image.
grayscale(): Converts the image to grayscale.
hue-rotate(): Changes the overall hue of the image.
invert(): Inverts the colors of the image.
opacity(): Makes the image transparent.
saturate(): Super-saturates or desaturates the input image.
sepia(): Converts the image to sepia.

Color functions

Functions which specify different color representations. These may be used anywhere a <color> is valid.

color(): Allows a color to be specified in a particular, specified colorspace (rather than the implicit sRGB colorspace that most of the other color functions operate in).
color-mix(): Takes two color values and returns the result of mixing them in a given colorspace by a given amount.
color-contrast(): Takes a color value and compares it to a list of other color values, selecting the one with the highest contrast from the list.
device-cmyk(): Used to express CMYK colors in a device-independent way.
hsl(): The HSL color model defines a given color according to its hue, saturation, and lightness components. An optional alpha component represents the color's transparency.
hsla(): The HSL color model defines a given color according to its hue, saturation, and lightness components. The alpha component represents the color's transparency.
hwb(): HWB (short for Hue-Whiteness-Blackness) is another method of specifying colors, similar to HSL.
lab(): Lab color is device-independent and specifies physical measurements of color.
lch(): LCH color is device-independent and specifies color using polar coordinates for chroma and hue.
rgb(): The RGB color model defines a given color according to its red, green, and blue components. An optional alpha component represents the color's transparency.
rgba(): The RGB color model defines a given color according to its red, green, and blue components. The alpha component represents the color's transparency.

Image functions

These functions may be used wherever an <image> is valid as the value for a property.

conic-gradient(): Conic gradients transition colors progressively around a circle.
image(): Defines an <image> in a similar fashion to the url() function, but with added functionality including specifying the image's directionality, specifying fallback images for when the preferred image is not supported
image-set(): A method of letting the browser pick the most appropriate CSS image from a given set, primarily for high pixel density screens.
linear-gradient(): Linear gradients transition colors progressively along an imaginary line.
radial-gradient(): Radial gradients transition colors progressively from a center point (origin).
repeating-linear-gradiant(): 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.
repeat-conic-gradiant(): 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.

Counter functions

The counter functions are generally used with the content property, although in theory 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.

Font functions

The font-variant-alternates property controls the use of alternate glyphs, the following functions are values for this property.

stylistic(): This function 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(): This function 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, like ss02.
character-variant(): This function 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, like cv02.
swash(): This function enables swash glyphs. The parameter is a font-specific name mapped to a number. It corresponds to the OpenType values swsh and cswh, like swsh 2 and cswh 2.
ornaments(): This function enables ornaments, like fleurons and other dingbat glyphs. The parameter is a font-specific name mapped to a number. It corresponds to the OpenType value ornm, like ornm 2.
annotation(): This function enables annotations, like circled digits or inverted characters. The parameter is a font-specific name mapped to a number. It corresponds to the OpenType value nalt, like nalt 2.

Shape functions

The following functions may be used as values for the <basic-shape> data type, which is used in the clip-path, offset-path, and shape-outside properties.

circle(): Defines a circle.
ellipse(): Defines an ellipse.
inset(): Defines an inset rectangle.
polygon(): Defines a polygon.

Specifications

Specification	Status	Comment
CSS Values and Units Module Level 4	Editor's Draft	Adds `toggle()`, `attr()`, `calc()`, `min()`, `max()`, `clamp()`, `round()`, `mod()`, `rem()`, `mod()`, `sin()`, `cos()`, `tan()`, `asin()`, `acos()`, `atan()`, `atan2()`, `pow()`, `sqrt()`, `hypot()`, `log()`, `exp()`, `abs()` and `sign()` functional notation.
CSS Values and Units Module Level 3	Candidate Recommendation	Adds `calc()` functional notation.
CSS Color Module Level 4	Working Draft	Adds commaless syntaxes for the `rgb()`, `rgba()`, `hsl()`, and `hsla()` functional notation. Allows alpha values in `rgb()` and `hsl()`, turning `rgba()` and `hsla()` into (deprecated) aliases for them. Adds `hwb()`, `device-cmyk()`, and `color()` functions.
CSS Color Module Level 3	Recommendation	Adds `rgba()`, `hsl()`, `hsla()` functional notation.
CSS Images Module Level 4	Working Draft	Adds `element()`, `image()`, `image-set()` and `conic-gradient()` functional notation.