Dofactory.com
Dofactory.com
Earn income with your CSS skills
Sign up and we'll send you the best freelance opportunities straight to your inbox.
We're building the largest freelancing marketplace for people like you.
By adding your name & email you agree to our terms, privacy and cookie policies.

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


Last updated on Sep 30, 2023

Earn income with your CSS skills
Sign up and we'll send you the best freelance opportunities straight to your inbox.
We're building the largest freelancing marketplace for people like you.
By adding your name & email you agree to our terms, privacy and cookie policies.

Guides