CSS: Gradients

Gradients in CSS are a way to create a smooth transition between two or more colors. They can be used anywhere an image might be, such as in backgrounds, and they are of the image data type. CSS defines several types of gradients:

Linear Gradients: A linear gradient is created using the linear-gradient() function and transitions colors in a straight line. It can go down, up, left, right, or diagonally. You can define the direction and color stops (the points where the color changes). Here’s an example of a simple top-to-bottom linear gradient:

CSS

#grad {
  background-image: linear-gradient(red, yellow);
}

Radial Gradients: Created with the radial-gradient() function, radial gradients are defined by their center and spread outwards in a circular or elliptical shape. Here’s an example:

CSS

#grad {
  background-image: radial-gradient(circle, red, yellow, green);
}

Conic Gradients: These gradients are rotated around a center point, much like how a cone’s surface would unwrap into a circle. The conic-gradient() function is used to create this effect. An example would be:

CSS

#grad {
  background-image: conic-gradient(red, yellow, green);
}.

Repeating Gradients: Both linear and radial gradients can be repeated.repeating-linear-gradient() and repeating-radial-gradient() functions are used to repeat the specified pattern of colors.