Two linear gradients layers on div - css

Question

I have a coloured rectangle div on which I put linear gradient at 45 degrees to achieve zebra-like effect. I'd like to layer the second gradient, on 135 degrees (orthogonal to the previous one).
height: 30px;
background-color: rgb(255, 0, 0);
background-image:
repeating-linear-gradient(45deg, rgb(255, 0, 0), rgb(255, 0, 0) 10px, rgb(0, 255, 0) 10px, rgb(0, 255, 0) 20px),
repeating-linear-gradient(135deg, rgb(255, 0, 0), rgb(255, 0, 0) 10px, rgb(0, 0, 255) 10px, rgb(0, 0, 255) 20px);
The main color is red, the first stripes are green and the last ones are intended to be blue. However I cannot see the last ones stripes in blue.
Achieved effect:
Expected effect:
How do I add multiple gradients overlapping themselves?

Answer 1

I don't believe you can layer two gradients on top of each other like that if they are all solid colors.
However, you can use some transparency and a bit of creative thinking to get your desired effect.
Your background-color, is already red, so replace all the references to red in your first gradient with transparent. Now you've got a pattern of stripes that are green and transparent. The transparent stripes appear red since that's the background color.
Then do a similar color-transparent stripe pattern for your second gradient: blue and transparent.
That ends up giving us our pattern backwards from how you want it, so the final step is to swap the two gradients, so the blue stripes are on top of the green ones.
div {
height: 30px;
background-color: rgb(255, 0, 0);
background-image: repeating-linear-gradient(135deg, transparent, transparent 10px, rgb(0, 0, 255) 10px, rgb(0, 0, 255) 14px), repeating-linear-gradient(45deg, transparent, transparent 10px, rgb(0, 255, 0) 10px, rgb(0, 255, 0) 20px);
}
<div class="one"></div>
#vals points out that you could also use transparency with your blue stripes on top of a red-green stripe pattern. So in your original code, in the red-blue stripe pattern, you'd replace the red references with transparent. Then, as with the first option, you'd flip the order of the gradients, so the blue-transparent pattern is first.
With that approach, the overall pattern wouldn't rely on the background-color, so it'd be more of a fallback.
div {
height: 30px;
background-color: rgb(255, 0, 0);
background-image: repeating-linear-gradient(135deg, transparent, transparent 10px, rgb(0, 0, 255) 10px, rgb(0, 0, 255) 14px), repeating-linear-gradient(45deg, rgb(255, 0, 0), rgb(255, 0, 0) 10px, rgb(0, 255, 0) 10px, rgb(0, 255, 0) 20px);
}
<div></div>