Why do multiple gradients don't apply?

Question

Why only the first gradient apply here?

html {
 background-color: #110b53;
 background: radial-gradient(
 circle at top left,
 #044b8d 5%,
 #110b53 35%,
 #110b53 60%
 ),
 radial-gradient(
 circle at top right,
 #8b0460 5%,
 #110b53 35%,
 #110b53 60%);
}

Should i create multipale classes for ecah gradient?

Answer 1

Because they both cover the entire page with no opacity. So one is sitting on top of the other.

If you add a transparent portion to one, it lets the other show through.

html {
  background-color: #110b53;
  background: radial-gradient(circle at top left,
      #044b8d 5%,
      #110b53 35%,
      #110b53 60%,
      transparent
      /* this */
    ),
    radial-gradient(circle at top right,
      #8b0460 5%,
      #110b53 35%,
      #110b53 60%);
}