Layering Multiple Gradients on CSS Background

Question

I want to create a background with two gradients - layered atop one another.

I created the below example, and it seems like I can't put multiple gradients together. (The example was created based on MDN-Using multiple backgrounds & MDN-gradient)

.radial-gradient {
  background: radial-gradient(red, yellow, rgb(30, 144, 255));
}
.linear-repeat {
  background: repeating-linear-gradient(45deg,
      blue, blue 5px, white 5px, white 10px);
}
.combined-gradient {
  background: radial-gradient(red, yellow, rgb(30, 144, 255)), 
    repeating-linear-gradient(45deg, blue, blue 5px, white 5px, white 10px);
}

<div class="radial-gradient">radial gradient</div><br/>
<div class="radial-gradient linear-repeat">linear gradient</div><br/>
<div class="radial-gradient linear-repeat">combined gradient 1</div><br/>
<div class="combined-gradient">combined gradient 2</div>

Maybe the following constraint prevents layering gradients:

Only the last background can include a background color.

If it's not allowed to layer two gradients as a background, how should I layer them in another way?

Answer 1

I think what you're looking for is this.

What's the problem with your code?

Well, each of your gradient is non-transparent, so one will overlap the other completely and that's why only one is visible. The workaround is, you make use of rgba(x,y,z,alpha) to give them alpha transparency which gives the background a fade effect to see through each other.

.combined-gradient1 {
  background: repeating-linear-gradient(45deg, rgba(00, 00, 255, 0.8), rgba(00, 00, 255, 0.8) 5px, rgba(255, 255, 255, 0) 5px, rgba(255, 255, 255, 0) 10px), radial-gradient(rgba(255, 0, 0, 0.8), rgba(255, 255, 0, 0.8), rgba(30, 144, 255, 0.8));
}

.combined-gradient2 {
  background: radial-gradient(rgba(255, 0, 0, 0.8), rgba(255, 255, 0, 0.8), rgba(30, 144, 255, 0.8)), repeating-linear-gradient(45deg, rgba(00, 00, 255, 1), rgba(00, 00, 255, 1) 5px, rgba(255, 255, 255, 0) 5px, rgba(255, 255, 255, 0) 10px);
}

<div class="combined-gradient1">combined gradient 1</div>
<br>
<div class="combined-gradient2">combined gradient 2</div>