css - Why do multiple gradients don't apply? - Stack Overflow

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?

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?

• css

Share Improve this question Follow asked Jan 11 at 15:02 Hamed FathiHamed Fathi 2155 bronze badges 0

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 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%);
}