Color blend css

by ravimallya

HTML

<h2>Live:</h2>

<div class="bkg-image">
	 <div class="overlay">
     <div class="background"></div>
     <div class="content">
		  <h1>Margins to show bkg img<br>&<br>Content unaffected by blend mode</h1>
    </div><!-- content -->
	 </div><!-- multiply-overlay-->
  
</div><!-- bkg img -->

CSS

.bkg-image {
  background-image: url(https://poppyvine.com/wp-content/uploads/2019/04/beach-bw.jpg);
  text-align: center;
  padding: 100px 0px;
  background-size: cover;
  background-position: center;
}

.overlay {
  position: relative;
  padding: 50px
}

.background {
    background: -moz-linear-gradient(-45deg, rgba(131, 210, 228, 1) 0%, rgba(0, 146, 178, 1) 50%, rgba(0, 146, 178, 0.5) 100%);
    background: -webkit-linear-gradient(-45deg, rgba(131, 210, 228, 1) 0%, rgba(0, 146, 178, 1) 50%, rgba(0, 146, 178, 0.5) 100%);
    background: linear-gradient(135deg, rgba(131, 210, 228, 1) 0%, rgba(0, 146, 178, 1) 50%, rgba(0, 146, 178, 0.5) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#83d2e4', endColorstr='#800092b2', GradientType=1);
    mix-blend-mode: multiply;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.content {
    position: relative;
}

.bkg-image .content h1 {
  color: white;
  isolation: isloate;
}