CSS Functions

CSS supports several functions that are used as property values.

These are built-in functions. Custom functions are not supported in CSS.

Example

#

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>

Function List

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

You may also like

Guides