HTML
<h2>multiple gradients:</h2>
<div class="gdt"></div>
<h3>Few multi-gradients concept rules:</h3>
<ol>
<li>the gradient that is painted first shows first.the next one will be painted below it.</li>
<li>when painting complex yet beautiful gradients i can paint the first gradient as if it is the only one i want to.then paint the second one that will be shown below the first one also as if it is the only one i want to and so on...</li>
<li>defining (transparent) color-stops in a gradient will give transparency for the gradient for that area so that other gradients below it will be visibile.</li>
</ol>
CSS
.gdt{
display:table;
margin:auto;
width:400px;
height:200px;
border:1px solid;
background:
radial-gradient(20px circle at 0px 0px ,purple,purple 10px,red 10px,red 15px,black 15px,black 19px,transparent 19px,transparent),linear-gradient(to right,red,red 15px,transparent 5px,transparent);
background-size:20px 20px;
background-repeat:repeat;
}
