Ultimate Reference for CSS Functions
Explore this complete and up-to-date guide to all CSS functions used in modern web development. These functions enhance how you define and control CSS properties within style declarations. From basic math operations to advanced visual effects, this reference covers every function used across CSS and CSS3 syntax.
Alphabetical List of All CSS Functions
Browse the full list of CSS functions, organized alphabetically for quick access. Each function includes a short explanation to help you understand its purpose, syntax, and real-world usage in responsive, dynamic stylesheets.
Alphabetical Reference
| 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 circular shape 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 Red, Green, and Blue values. | Color |
| rgba() | Defines colors using Red, Green, Blue, 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 |