CSS Gradient Trick

A cool trick to add gradient without using the old way of making your container relative and using some sort of <span class=”textbg”></span> somewhere in your container .


.container img:before {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 150px;
background: linear-gradient(transparent, black);
}

and you should have this kind of effect without any extra codes. It helps make your text pop in case you’re wondering the purpose cause not all images will make your text readable.

cssgrad_2

Leave a Reply

"Life is like a camera. Focus only on what is important and you will capture it perfectly."