”;
CSS value functions allow you to generate values for CSS properties dynamically. These functions take parameters and return a value that can be used in place of a static value.
Syntax
selector { property: function([argument]? [, argument]!); }
-
The function name appears first in the value syntax, followed by a opening parenthesis (. The argument(s) come next, and a closing parenthesis ) completes the function.
-
Multiple parameters are accepted by functions, and their formatting is the same as that of CSS property values.
-
Though optional, whitespace is permitted inside parenthesis. Multiple arguments are separated by commas in certain functional notations and by spaces in others.
Transform Functions
The CSS data type called <transform-function> represents visual transformations and is employed as a value within the transform property.
Translate Functions
Following table lists translate functions:
Functions | Description |
---|---|
translateX() | Translates an element horizontally. |
translateY() | Translates an element veritcally. |
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
Following table lists rotation functions:
Functions | Description |
---|---|
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
Following table lists scaling functions:
Functions | Description |
---|---|
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. |
Skew Functions
Following table lists skew functions:
Functions | Description |
---|---|
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 Functions
Following table lists matrix functions:
Functions | Description | matrix() | Describes a homogeneous 2D transformation matrix. |
---|---|
matrix3d() | Describes a 3D transformation as a 4×4 homogeneous matrix. |
Perspective Functions
Following table lists perspective functions:
Functions | Description | perspective() | Sets the distance between the user and the z=0 plane. |
---|
Math Functions
Mathematical expressions can be used in CSS to represent numeric values using math functions.
Basic Arithmetic Functions
Following table lists basic arithmetic functions:
Function | Description |
---|---|
calc() | Performs basic arithmetic calculations on numerical values. |
Comparision Functions
Following table lists comparision functions:
Function | Description |
---|---|
min() | Determines the minimum value from a given set of values. |
max() | Determines the maximum value from a given list of values. |
clamp() | Calculates the central of a minimum, central, and maximum values. |
Stepped Value Functions
Following table lists stepped value functions:
Function | Description |
---|---|
round() | Calculates a rounded number based on a rounding strategy. |
Trignometric Functions
Following table lists trignometric functions:
Function | Description |
---|---|
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. |
Filter Functions
The CSS data type <filter-function> denotes a graphical effect capable of changing the look of an input image. It”s used within the filter and backdrop-filter properties.
Function | Description |
---|---|
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 CSS data type <color> defines various ways to represent colors.
Function | Description |
---|---|
rgb() | Specifies a given color according to its red, green, blue and alpha (transparency) components. |
hsl() | Specifies a given color according to its hue, saturation, lightness and alpha (transparency) components. |
hwb() | Specifies a given color according to its hue, whiteness and blackness components. |
lch() | Specifies a given color according to its lightness, chroma and hue components. |
oklch() | Specifies a given color according to its lightness, chroma, hue and alpha (transparency) components. |
lab() | Specifies a given color according to its lightness, a-axis distance and b-axis distance in the lab colorspace. |
oklab() | Specifies a given color according to its lightness, a-axis distance, b-axis distance in the lab colorspace and alpha (transparency). |
color() | Specifies a particular, specified colorspace rather than the implicit sRGB colorspace |
color-mix() | Mixes two color values in a given colorspace by a given amount. |
Image Functions
The CSS data type <image> offers graphical representations of images or gradients.
Gradient Functions
Following table lists gradient functions:
Function | Description |
---|---|
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
Following table lists image functions:
Function | Description |
---|---|
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. |
paint() | Defines an <image> value generated with a PaintWorklet. |
Counter Functions
CSS counter functions can theoretically be used anywhere a <string> is available, however they are typically used in conjunction with the content property.
Function | Description |
---|---|
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. |
Shape Functions
The CSS data type <basic-shape> signifies a visual shape and is employed in properties such as clip-path, offset-path, and shape-outside.
Function | Description |
---|---|
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. |
Reference Functions
In order to reference a value defined elsewhere, the following functions are used as a value of properties.
Function | Description |
---|---|
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. |
Grid Functions
The following functions are used to define a CSS Grid.
Function | Description |
---|---|
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
Alternate glyph usage is managed through the use of CSS font functions in combination with the font-variant-alternates property.
Function | Description |
---|---|
stylistic() | This function activates stylistic alternates for certain characters using a font-specific name associated with a number. |
styleset() | This function activates stylistic alternatives for groups of characters. The parameter is a font-specific name associated with a number, such as ss02. |
character-variant() | This function allows distinct stylistic variations for individual characters, unlike styleset(), which creates coherent glyphs for a character set. |
swash() | This function activates swash glyphs with a font-specific name associated with a number, e.g. swsh 2 and cswh 2. |
ornaments() | This function activates ornaments such as fleurons and dingbat glyphs using a font-specific name associated with a number, such as ornm 2. |
annotation() | This function allows annotations such as circled digits or inverted characters using a font-specific name associated with a number, for example, nalt 2 |
Easing Functions
The values for transition and animation properties come from the following functions.
Function | Description |
---|---|
linear() | Easing function that interpolates linearly between its points.. |
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. |
”;