What are CSS Gradients

<BackgroundsOpacity>

In CSS, gradients are a special type of image made of a progressive transition between two or more colors. There are three types of gradient images available:

  • Linear gradient, the transition of color along a straight line, created with the function linear-gradient().
  • Radial gradient, the transition of color radiated from an origin, created with the function radial-gradient().
  • Conic gradient, the transition of color rotated around a center point, created with the function conic-gradient().
Open demo in new tab

Linear gradient

The linear-gradient() function has the following syntax:

css
1linear-gradient(<direction>, <starting_color>, <finishing_color>)

The direction parameter accepts keywords such as to top and to right, which are equivalent to angle values 0deg and 90deg. Alternatively, you can specify angle values directly, which allows you to be more precise.

css
1linear-gradient(to right, red, blue)
2linear-gradient(60deg, red, blue)

As for the colors, you are allowed to specify more than just starting and finishing colors. It is possible to define multiple transition colors in between.

css
1linear-gradient(<direction>, <starting_color>, <transition_color_1>, <transition_color_2>, . . . , <finishing_color>)

Radial gradient

Radial gradients are created with the function radial-gradient(). You are required to provide the position of the origin, the starting color, the finishing color, and optionally, the transition colors.

css
1radial-gradient(<origin>, <starting_color>, <transition_color_1>, <transition_color_2>, . . . , <finishing_color>)

The origin can be specified with either keywords such as at center, at left, at right, and so on. Or coordinates such as at 20px 30px, at 40% 20%, and more.

css
1radial-gradient(at center, red, blue)
2radial-gradient(at 50px 20px, red, blue)
3radial-gradient(at 40% 20%, red, blue)

Conic gradient

Conic gradients are less used, but we will still talk about it in this lesson. They are most commonly used to create color wheels.

The conic-gradient() function has the following syntax:

css
1conic-gradient(<starting_angle>, <starting_color>, <transition_color_1>, <transition_color_2>, . . . , <finishing_color>)

In this case, you will need to specify a starting angle, which defaults to from 0deg.

css
1conic-gradient(from 45deg, red, blue)
<BackgroundsOpacity>