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 |