What are CSS Gradients

<BackgroundsBlend Modes>

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().

Linear gradient

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

linear-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.

linear-gradient(to right, red, blue)
linear-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.

linear-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.

radial-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.

radial-gradient(at center, red, blue)
radial-gradient(at 50px 20px, red, blue)
radial-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:

conic-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.

conic-gradient(from 45deg, red, blue)
<BackgroundsBlend Modes>