How Do CSS Gradients Work?

.element {
  /* Basic */
  background: linear-gradient(red, blue);

  /* With direction */
  background: linear-gradient(to right, red, blue);
  background: linear-gradient(45deg, red, blue);

  /* Multiple stops */
  background: linear-gradient(red, yellow, green);

  /* With positions */
  background: linear-gradient(red 0%, yellow 50%, green 100%);
}

.element {
  background: radial-gradient(circle, red, blue);
  background: radial-gradient(ellipse at top, red, blue);
  background: radial-gradient(circle at 30% 30%, white, transparent);
}

.element {
  /* Pie chart effect */
  background: conic-gradient(red, yellow, green, blue, red);

  /* Color wheel */
  background: conic-gradient(from 0deg, red, yellow, lime, aqua, blue, magenta, red);
}