Skip to main content

Creating a Black Overlay on image in CSS

· One min read
Preet Shah
Preet Shah
Software Developer @ JPMC

Code for creating a black overlay in CSS over an image:

{
  background: black;
  overflow: hidden;
  background: -webkit-linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),url("<IMAGEURL_COMES_HERE>");
  object-fit: cover;
}

References​