simple linear gradient overlay for an image to make it darker or lighter

i use this one often if i have a background image and some text over the top, you can darken or lighten the linear gradient values to match the text content and make it readable.

HTML

<p>Here is the normal gradient box with no overlay</p>
<div class='gradient-box'> 
Some text
</div>

<p>Gradient with dark overlay</p>
<div class='gradient-box dark-overlay'> 
Some text
</div>

<p>Gradient with light overlay</p>
<div class='gradient-box light-overlay'> 
Some text
</div>

CSS

.gradient-box {
margin-bottom:30px;
font-size:30px;
height:400px;
width:400px;
border-radius:3px;
padding:30px;
text-align:center;
color:#FFF;
background:url(https://kruxor.com/images/pexels-photo-4389409.jpeg) center no-repeat;
background-size:cover;
text-shadow:0px 1px 2px #000;
}
.dark-overlay {
background:linear-gradient( rgba(0,0,0,0.8), rgba(0,0,0,0.8) ), url(https://kruxor.com/images/pexels-photo-4389409.jpeg) center no-repeat;
background-size:cover;
}
.light-overlay {
background:linear-gradient( rgba(255,255,255,0.8), rgba(255,255,255,0.8) ), url(https://kruxor.com/images/pexels-photo-4389409.jpeg) center no-repeat;
background-size:cover;
color:#000;
text-shadow:0px 1px 2px #FFF;
}

Here is the normal gradient box with no overlay

Some text

Gradient with dark overlay

Some text

Gradient with light overlay

Some text

Other Items in css
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
Don't look to be the next Facebook, try to solve a real problem instead.
Unknown