CSS Functions Reference
CSS Functions
CSS functions can be used to calculate values, manipulate strings or colors, create complex gradients and shapes, and more.
CSS functions are typically used as values for various CSS properties.
| Function | Description |
|---|---|
| acos() | Returns the inverse cosine of a number between -1 and 1 |
| asin() | Returns the inverse sine of a number between -1 and 1 |
| atan() | Returns the inverse tangent of a number between -∞ and ∞ |
| atan2() | Returns the inverse tangent of two values between -infinity and infinity |
| attr() | Returns the value of an attribute of the selected element |
| blur() | Applies a blur effect to an element |
| brightness() | Adjusts the brightness of an element (brighter or darker) |
| calc() | Allows you to perform calculations to determine CSS property values |
| circle() | Defines a circle |
| color() | Allows a color to be specified in a particular, specified color space |
| color-mix() | Mixes two color values in a given color space, by a given amount |
| conic-gradient() | Creates a conic gradient |
| contrast() | Adjusts the contrast of an element |
| cos() | Returns the cosine of an angle |
| counter() | Returns the current value of the named counter |
| counters() | Returns the current values of the named and nested counters |
| cubic-bezier() | Defines a Cubic Bezier curve |
| drop-shadow() | Applies a drop shadow effect to an image |
| ellipse() | Defines an ellipse |
| exp() | Returns E raised to the power of the specified number x (Ex) |
| fit-content() | Allows you to size an element based on its content |
| grayscale() | Converts an image to grayscale |
| hsl() / hsla() | Defines a color using the Hue-Saturation-Lightness model (HSL); with an optional alpha component |
| hue-rotate() | Applies a color rotation to an element |
| hwb() | Defines a color using the Hue-Whiteness-Blackness model (HWB); with an optional alpha component |
| hypot() | Returns the square root of the sum of squares of its parameters |
| inset() | Defines a rectangle at the specified inset distances from each side of the reference box |
| invert() | Inverts the color of an image |
| linear-gradient() | Creates a linear gradient |
| max() | Uses the largest value, from a comma-separated list of values, as the property value |
| min() | Uses the smallest value, from a comma-separated list of values, as the property value |
| radial-gradient() | Creates a radial gradient |
| repeating-conic-gradient() | Repeats a conic gradient |
| repeating-linear-gradient() | Repeats a linear gradient |
| repeating-radial-gradient() | Repeats a radial gradient |
| rgb() | Defines colors using the Red-Green-Blue model (RGB) |
| rgba() | Defines colors using the Red-Green-Blue-Alpha model (RGBA) |
| var() | Inserts the value of a custom property |
