CSS supports several functions that are used as property values.
These are built-in functions. Custom functions are not supported in CSS.
A color gradient created with a linear-gradient function.
<style>
.bg-gradient {
height: 150px;
background-image: linear-gradient(darkmagenta, orangered);
}
</style>
<div class="bg-gradient"></div>
A list of available CSS functions. Click each name for more details.
| Function | Description |
|---|---|
| attr | Returns the selected element attribute value. |
| calc | Performs calculations to determine property values |
| hsl | Creates a color using a hue, saturation, lightness model |
| hsla | Creates a color using a hue, saturation, lightness, alpha model |
| rgb | Creates a color using a red, green, blue model |
| rgba | Creates a color using a red, green, blue, alpha model |
| var | Inserts the value of a custom property |
| linear-gradient | Creates a linear color gradient with 2 or more stops |
| radial-gradient | Creates a radial color gradient with 2 or more stops |
| repeating-linear-gradient | Repeats a linear gradient |
| repeating-radial-gradient | Repeats a radial gradient |
| cubic-bezier | Specifies a cubic bezier curve |
