CSS Gradients you should be aware of

A gradient in CSS is a transition between two or more colors. It can be applied to backgrounds, borders, and other elements. CSS defines three types of gradients:

Linear gradients

A linear gradient is a type of gradient in CSS that creates a transition between two or more colors in a linear fashion. The linear-gradient function is used to define a linear gradient and it can be applied to backgrounds, borders, and other elements. The direction of the gradient can be specified using various values such as to bottom, to top, to right, to left, and to right. You can also specify multiple colors for a gradient, which will create a smooth transition between them. Linear gradients can be used to create a variety of effects, such as creating a sense of depth or simulating light and shadow.

div {
    background: linear-gradient(to right, #ff0000, #ffff00, #0000ff);
}

div {
    background: linear-gradient(to top, #ff0000, #ffff00, #0000ff);
}

Radial gradient

A radial gradient is a type of gradient in CSS that creates a transition between two or more colors in a circular or elliptical shape. The radial-gradient function is used to define a radial gradient, and it can be applied to backgrounds, borders, and other elements. The shape and size of the gradient can be controlled using various values such as position, shape, size and extent. You can also specify multiple colors for a gradient, which will create a smooth transition between them. Radial gradients can be used to create a variety of effects, such as creating a sense of depth, simulating light and shadow and creating realistic looking circles, spheres or other shapes.

div {
    background: radial-gradient(circle at center, #ff0000, #0000ff);
  }

Repeating gradient

Repeating gradients duplicate a gradient as much as necessary to fill a given area. They are generated with the repeating-linear-gradient() and repeating-radial-gradient() functions.

A repeating linear gradient is a type of linear gradient that repeats itself along the gradient line. It is defined using the repeating-linear-gradient function and is used to create a pattern of transitioning colors along a linear gradient.

The syntax for a repeating linear gradient is similar to that of a linear gradient, with the addition of a repeating-linear-gradient function.

div {
    background: repeating-linear-gradient(to right, #ff0000, #ffff00, #0000ff);
  }

This will create a repeating gradient that starts with red on the left, transitions to yellow in the middle, blue on the right then again red, yellow and blue repeatedly.

It can be useful for creating backgrounds with repeating patterns, textured effects, or other visual effects.

A repeating radial gradient is a type of radial gradient that repeats itself along the gradient shape. It is defined using the repeating-radial-gradient function and is used to create a pattern of transitioning colors along a radial gradient.

The syntax for a repeating radial gradient is similar to that of a radial gradient, with the addition of a repeating-radial-gradient function.

div {
    background: repeating-radial-gradient(circle at center, #ff0000, #ffff00, #0000ff);
  }

This will create a repeating radial gradient that starts with red in the center, transitions to yellow in the middle, blue at the edges of the circle and then again from red in center, yellow in middle to blue at the edges repeatedly.

It can be useful for creating backgrounds with repeating patterns, textured effects, or other visual effects.

It is worth noting that the support for repeating radial gradient is not as wide spread as linear and radial gradient, and may not be supported in all browsers.

Conic gradient

Conic gradients, also known as angular gradients, are a type of gradient that is similar to a pie chart. It is a CSS feature that allows you to create color transitions in a circular shape, with the colors radiating out from a central point.

The conic gradient is specified using the conic-gradient function and can be applied to backgrounds, borders, and other elements. It can take multiple color-stops and their position can be controlled by using angles or percentages.

Here’s an example of conic gradient applied to the background of a div element:

div {
    background: conic-gradient(from 0deg, #ff0000, #ffff00, #0000ff);
  }

This will create a conic gradient that starts with red at 0 degree, transitions to yellow at 120 degree and ends with blue at 240 degree.

Conic gradient is relatively new CSS feature and support may be limited in some browsers.

Pie chart using conic gradient

div {
    background: conic-gradient(
            #ff0000 0deg 190deg,
            #ffff00 190deg 240deg,
            #0000ff 240deg 360deg
            );
    border-radius: 100%;
  }

Donut chart using conic gradient

div {
    display: grid;
    width: 400px;
    height: 400px;
    background: conic-gradient(
            #ff0000 0deg 190deg,
            #ffff00 190deg 240deg,
            #0000ff 240deg 360deg
            );
    border-radius: 100%;
    place-items: center;
  }
  
  div:after {
    content: "";
    display: block;
    background: #fff;
    width: 250px;
    height: 250px;
    border-radius: 100%;
}