What are gradients and how they can be generated?

Gradients are images generated by code that are being generated on the fly by the browser. Gradients may be applied everywhere images can be applied:

background-image
border-image
list-style-image

CSS gradients are represented by the <gradient> data type, a special type of <image> made of a progressive transition between two or more colors. You can choose between three types of gradients: linear (created with the linear-gradient() function), radial (created with radial-gradient()), and conic (created with the conic-gradient() function). You can also create repeating gradients with the repeating-linear-gradient(), repeating-radial-gradient(), and repeating-conic-gradient() functions.

.simple-linear {
  background: linear-gradient(blue, pink);
}
.diagonal-gradient {
  background: linear-gradient(to bottom right, blue, pink);
}
.angled-gradient {
  background: linear-gradient(70deg, blue, pink);
}
.auto-spaced-linear-gradient {
  background: linear-gradient(red, yellow, blue, orange);
}
.multicolor-linear {
   background: linear-gradient(to left, lime 28px, red 77%, cyan);
}
.striped {
   background: linear-gradient(to bottom left, cyan 50%, palegoldenrod 50%);
}
.stacked-linear {
  background:
      linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
      linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
      linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
}

.simple-radial {
  background: radial-gradient(red, blue);
}
.radial-gradient {
  background: radial-gradient(red 10px, yellow 30%, #1e90ff 50%);
}
.radial-gradient {
  background: radial-gradient(at 0% 30%, red 10px, yellow 30%, #1e90ff 50%);
}
.stacked-radial {
  background:
      radial-gradient(circle at 50% 0,
        rgba(255,0,0,.5),
        rgba(255,0,0,0) 70.71%),
      radial-gradient(circle at 6.7% 75%,
        rgba(0,0,255,.5),
        rgba(0,0,255,0) 70.71%),
      radial-gradient(circle at 93.3% 75%,
        rgba(0,255,0,.5),
        rgba(0,255,0,0) 70.71%) beige;
  border-radius: 50%;
}

.simple-conic {
  background: conic-gradient(red, blue);
}
.conic-gradient {
  background: conic-gradient(at 0% 30%, red 10%, yellow 30%, #1e90ff 50%);
}

Source: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients

Great article

A Complete Guide to CSS Gradients: https://css-tricks.com/a-complete-guide-to-css-gradients/