1. Ultimate Reference For CSS Functions
This ultimate and updated reference tutorial contains a complete list of CSS functions that we can manipulate while defining properties in CSS language declarations. This comprehensive function guide covers everything from basic to advanced functions used in CSS and CSS3 language.
2. Alphabetical Reference of CSS Functions
Dive into the alphabetically organized list of all CSS functions for painless developer reference. Each function has a brief description, giving you a general understanding of its functionality and application.
| Function | Description | Category |
| abs() | Calculates the absolute value of a number. | Math |
| acos() | Get the trigonometric inverse cosine of a number. | Math |
| asin() | Get the trigonometric inverse sine of a number. | Math |
| atan() | Get the trigonometric inverse tangent of a number. | Math |
| atan2() | Get the trigonometric inverse tangent of two-numbers in a plane. | Math |
| attr() | It uses the attribute's value defined inside an element. | Reference |
| blur() | It increases the gaussian blur of an image. | Filter |
| brightness() | This function increases, decreases, or adjusts the brightness of an image. | Filter |
| calc() | Calculates the value of a property using basic arithmetic calculations. | Math |
| character-variant() | Find specific stylistic alternatives for characters. | Font |
| circle() | Creates a circle circle> in CSS. | Shape |
| clamp() | Binds a value between an upper and lower bound. | Math |
| color() | Defines a particular, specified colorspace rather than the absolute sRGB colorspace. | Color |
| color-contrast() | Select the highest color contrast from a list of colors, and compare it to a base color value. | Color |
| color-mix() | Mixes two color values in a given colorspace by a given amount. | Color |
| conic-gradient() | Creates a conical gradient that transitions around a center point. | Image |
| contrast() | This function increases or decreases the image contrast. | Filter |
| cos() | Get the trigonometric cosine of a number. | Math |
| counter() | Define an increment or decrement of a counter value. | Counter |
| counters() | Creates nested counters, returning a concatenated string representing the current values of the named counters, if there are any. | Counter |
| cross-fade() | Creates a cross-fade transition between two images. | Image |
| cubic-bezier() | It creates a cubic Bézier curve. | Animation |
| device-cmyk() | Defines CMYK colors in a device-independent way. | Color |
| drop-shadow() | Applies a drop shadow effect to an element's box. | Filter |
| element() | References another element in a shadow tree. | Image |
| ellipse() | Defines an ellipse shape for use within a CSS property. | Shape |
| env() | Uses the user-agent defined as environment variable. | Reference |
| exp() | It calculates e raised to the power of a number. | Math |
| fit-content() | Clamps a given size to an available size according to the formula min(maximum size, max(minimum size, argument)). | Grid |
| greyscale() | This function transforms an image to grayscale. | Filter |
| hsl() | Defines colors using hue, saturation, and lightness values. | Color |
| hsla() | It defines colors using hue, saturation, lightness, and alpha transparency values. | Color |
| hue-rotate() | It modifies the overall hue of an image. | Filter |
| hwb() | Defines a given color according to its hue, whiteness, and blackness components. | Color |
| hypot() | Calculates the square root of the sum of the squares of its arguments. | Math |
| image() | Defines an image value for use within a CSS property. | Image |
| image-set() | Picks the most appropriate CSS image from a given set, primarily for high pixel density screens. | Image |
| inset() | Defines an inset value for use within a CSS property. | Shape |
| invert() | Inverts the colors of an image. | Filter |
| lab() | Defines a given color according to its lightness, a-axis, and b-axis distance in the lab colorspace. | Color |
| lch() | Defines a color according to its lightness, chroma, and hue components. | Color |
| light-dark() | It returns one of the two provided colors based on the current color scheme. | Color |
| linear() | An easing function that interpolates linearly between its points. | Animation |
| linear-gradient() | Defines a linear gradient that transitions in a straight line. | Image |
| log() | Get the logarithm of a number using this function. |
Math |
| matrix() | Defines a 2D transformation as a matrix of six values. | Transform |
| matrix3d() | Defines a 3D transformation as a matrix of 16 values. | Transform |
| minmax() | This function declares a size range greater-than or equal-to min and less-than or equal-to max. | Grid |
| min() | It returns the minimum value from a list of comma-separated values. | Math |
| max() | It returns the maximum value from a list of comma-separated values. | Math |
| mod() | Calculates a modulus (with the same sign as the divisor) when dividing one number by another. | Math |
| oklab() | Defines a given color according to its lightness, a-axis distance, b-axis distance in the lab colorspace, and alpha (transparency). | Color |
| oklch() | Defines a specified color according to its lightness, chroma, and alpha (transparency) components. | Color |
| opacity() | It adds transparency to an image. | Filter |
| ornaments() | This function enables ornaments such as fleurons and other dingbat glyphs. | Font |
| paint() | Defines an <image> value generated with a PaintWorklet. | Image |
| path() | Creates a shape in CSS using a series of path commands. | Shape |
| perspective() | Sets the distance between the user and the z=0 plane. | Transform |
| polygon() | Creates a polygon shape in CSS. | Shape |
| pow() | Calculates the base raised to the power of a number. | Math |
| radial-gradient() | Creates a radial gradient that transitions outwards from a center point. | Image |
| rect() | Creates a rectangle shape using the distances from the top and left edges of the reference box. | Shape |
| rem() | It calculates a remainder (with the same sign as the dividend) when dividing one number by another. | Math |
| repeat() | Repeats a value a specified number of times. | Grid |
| repeating-conic-gradient() | Creates a repeating conical gradient background. | Image |
| repeating-linear-gradient() | It creates a repeating linear gradient background. | Image |
| repeating-radial-gradient() | Creates a repeating radial gradient background. | Image |
| rgb() | Defines colors using , , and values. | Color |
| rgba() | Defines colors using , , , and alpha transparency values. | Color |
| rotate() | Rotates an element around a fixed point. | Transform |
| rotate3d() | Rotates an element around an arbitrary axis in 3D space. | Transform |
| rotateX() | It rotates an element around its X-axis. | Transform |
| rotateY() | Rotates an element around its Y-axis. | Transform |
| rotateZ() | Rotates an element around its z-axis. | Transform |
| round() | It calculates a rounded number based on a rounding strategy. | Math |
| saturate() | Modifies the overall saturation of an image. | Filter |
| scale() | Use this function to scale up or down an element by a specified factor. | Transform |
| scale3d() | It scales an element in three dimensions. | Transform |
| scaleX() | Scales an element along the x-axis. | Transform |
| scaleY() | Scales an element along the y-axis. | Transform |
| scaleZ() | It scales an element along the z-axis. | Transform |
| scroll() | Sets the animation timeline of an element to an anonymous scroll progress timeline. | Animation |
| sepia() | It increases the sepia of an image. | Filter |
| sin() | Get the trigonometric sine of a number. | Math |
| sign() | Get the sign (positive or negative) of the specified number. | Math |
| skew() | Skews an element along the X and Y axes. | Transform |
| skewX() | It skews an element along the x-axis. | Transform |
| skewY() | Skews an element along the y-axis. |
Transform |
| sqrt() | Calculates the square root of a number. | Math |
| steps() | Iteration along a specified number of stops along the transition, displaying each stop for equal lengths of time. | Animation |
| stylistic() | Enables stylistic alternates for individual characters. | Font |
| styleset() | It enables stylistic alternatives for sets of characters. | Font |
| swash() | Enables swash glyphs. | Font |
| symbols() | Defines the counter styles inline, directly as the value of a property. | Counter |
| tan() | Get the trigonometric tangent of a number. | Math |
| translate() | Translates an element along the X and Y axes. | Transform |
| translate3d() | Translates an element in three dimensions. | Transform |
| translateX() | It translates an element along the x-axis. | Transform |
| translateY() | Translates an element along the y-axis. | Transform |
| translateZ() | Translates an element along the z-axis. | Transform |
| url() | Defines a URL value for use within a CSS property. | Reference |
| var() | Defines a custom property or variable in CSS. | Reference |
| view() | Sets the animation timeline of an element to an anonymous view progress timeline. | Animation |
| xywh() | Defines a rectangle shape using the specified distances from the top and left edges of the reference box and the rectangle width and height. | Shape |
3. Reference Links
To create this extensive and regularly updated reference of all CSS functions, we gathered information from many reliable sources as listed below.