How to Show 2 Gradients at Once? - css

Question

I'm trying to make 2 gradients overlap each other at the same time with this code...
#grad1 {
height: 3px;
background: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%);
background: -o-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%);
background: -moz-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%);
background: linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%);
}
#grad2 {
height: 3px;
background: -webkit-linear-gradient(left, #2184E2 , #AE1937);
background: -o-linear-gradient(right, #2184E2, #AE1937);
background: -moz-linear-gradient(right, #2184E2, #AE1937);
background: linear-gradient(to right, #2184E2 , #AE1937);
}
But it doesn't overlap each other like I want it to.
How can I make #grad1 overlap #grad2 so they're both visible at the same time?

Answer 1

Use this way:
#grad1 {
position: absolute;
z-index: 1;
}
#grad2 {
position: absolute;
z-index: 2;
}
This way it just overlaps both the stuff, keeping the #grad2 on top of #grad1. Make sure, you have another <div>, which is the parent of both having a position: relative to it.
Snippet
#grad1 {
height: 3px;
background: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%);
background: -o-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%);
background: -moz-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%);
background: linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%);
}
#grad2 {
height: 3px;
background: -webkit-linear-gradient(left, #2184E2 , #AE1937);
background: -o-linear-gradient(right, #2184E2, #AE1937);
background: -moz-linear-gradient(right, #2184E2, #AE1937);
background: linear-gradient(to right, #2184E2 , #AE1937);
}
#grad1 {
position: absolute;
z-index: 1;
}
#grad2 {
position: absolute;
z-index: 2;
}
.parent {position: relative; width: 50px; height: 50px;}
.parent > div {width: 50px;}
<div class="parent">
<div id="grad1"></div>
<div id="grad2"></div>
</div>