How to make a gradient in CSS

Create a gradient in CSS with an example: learn how to easily use the CSS linear-gradient() function to add colorful gradients to your website!

CSS Gradient

A CSS gradient is a smooth transition between two or more specified colors. It is used to make webpages more visually appealing, and can be used as a background for a page, or even as the background for specific elements on a page.

In CSS, a gradient is specified using the background-image property. Here is an example of a linear gradient that goes from red to blue:

background-image: linear-gradient(red, blue);

To create a more complex gradient with more than two colors, you can use the repeating-linear-gradient() function. This function takes multiple color stops as parameters. A color stop is a color and an optional position. Here is an example of a repeating linear gradient with four color stops:

background-image: repeating-linear-gradient(
    45deg,
    red,
    red 10%,
    orange 20%,
    yellow 30%,
    green 40%
  );

In this example, the color stops are specified in a 45 degree angle. The first color is red and the last color is green. The other two colors, orange and yellow, are specified with a percentage value, indicating the position in the gradient.

Another type of gradient is the radial gradient. This type of gradient starts from a single point and radiates outward in a circle. Here is an example of a radial gradient with four color stops:

background-image: radial-gradient(
    circle at center,
    red,
    orange 25%,
    yellow 50%,
    green 75%
  );

In this example, the circle is centered at the center of the element and the colors are specified in percentages. As with the linear gradient, the first color is red and the last color is green, with orange and yellow in between.

CSS gradients can be a great way to add visual interest to a webpage. They can be used as backgrounds for entire pages, or as backgrounds for specific elements. With the right combination of colors and color stops, you can create a wide range of interesting gradients.