using css linear gradient for background overlays

HTML

<p>here is a more advanced example using 4 color points<p>
<div class='test-box linear-gradient-multi'>multi point linear gradient</div>

CSS

.test-box {
  min-height:300px;
  width:100%;
  margin-bottom:20px;
  padding:20px;
  text-align:center;
  color:#FFF;
  text-shadow:0px 1px 2px #000;
}
.linear-gradient-basic {
  background:linear-gradient(#000000,#5d3bdc);
}
.linear-gradient-multi {
  background: linear-gradient(to bottom, #5d3bdc, #5d3bdc 50%, #5d3bdc 75%, rgba(0,0,0,1) 100%);
}
.linear-gradient-url {
  background: linear-gradient(to top, transparent 75%, rgba(0,0,0,1) 100%), url('https://kruxor.com/images/pexels-photo-709552.jpg');
  background-size:cover;
}

HTML

<p>here we can add a linear gradient in its most basic form top to bottom</p>
<div class='test-box linear-gradient-basic'>basic linear gradient</div>
<p>here is a more advanced example using 4 color points<p>
<div class='test-box linear-gradient-multi'>multi point linear gradient</div>
<p>you can also combine a background url image with this</p>
<div class='test-box linear-gradient-url'>background image and linear gradient (at the top)</div>

here we can add a linear gradient in its most basic form top to bottom

here is a more advanced example using 4 color points

you can also combine a background url image with this