using css linear gradient for background overlays

a few examples using css linear gradient for the background

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>

here is a more advanced example using 4 color points

multi point linear gradient

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

basic linear gradient

here is a more advanced example using 4 color points

multi point linear gradient

you can also combine a background url image with this

background image and linear gradient (at the top)

Other Items in css

No Items Found.

Add Comment
Type in a Nick Name here
 
Page Views

This page has been viewed 663 times.

Search Code
Search Code by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code snippits here, mostly for my reference. Also if i find a good site, i usually add it here.

โค๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ•น

Random Quote
I believe that in order to better your knowledge base, it takes a lot of failing in order to succeed. I don't consider anything a failure as long as you get back up and you learn from your own mistakes.
Unknown