What are CSS Gradients

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

<div class="linear"></div>

<div class="radial"></div>

<div class="conic"></div>

div {
  width: 100%;
  height: 200px;
  border-radius: 10px;
}

.linear {
  background-image: linear-gradient(to right, #a855f7, #f43f5e);
}

.radial {
  background-image: radial-gradient(at center, #6366f1, #0ea5e9);
}

.conic {
  background-image: conic-gradient(
    from 45deg,
    #ef4444,
    #eab308,
    #10b981,
    #3b82f6,
    #a855f7,
    #f43f5e
  );
}

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 gives you more precise control.

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, or coordinates such as at 20px 30px and at 40% 20%.

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