Make Image White Background Transparent with CSS

Suppose your image's background color is white. If you want the background to be transparent, you can use the CSS blend mode, which is adding the mix-blend-mode: multiply; CSS property.

img{
  mix-blend-mode: multiply;
}

How to Make the White Background of an Image Transparent

HTML Demo

<div class="warp">
  <div>
    <img class="images" src="https://www.yourdomain.com/sample.jpeg" />
    <h2>normal</h2>
  </div>
  <div>
    <img class="img-tr" src="https://www.yourdomain.com/sample.jpeg" />
    <h2>mix-blend-mode: multiply;</h2>
  </div>

</div>

CSS Demo

body {
  background-color: #d0d0d0;
}
h2 {
  font-size: 20px;
}
.warp {
  display: flex;
  width: 50vw;
  margin: 0 auto;
}
.warp div {
  width: 50%;
  text-align: center;
}
.warp div img {
  width: 100%;
}
.img-tr {
  mix-blend-mode: multiply;
}

@media (max-width: 960px) {
  .warp {
    flex-direction: column;
    width: 100%;
  }
  .warp div {
    width: auto;
  }
}

Other Solutions for CSS Transparency

Mix-blend-mode does work with some browsers. But some teams found that it causes performance issues in chrome.

A clever designer came up with a new trick. You can create an almost transparent layer in it. But when it is placed on a white background, its color will match the color of the surrounding background.

The way this "magic" color is done is by calculating how much each color axis should be darkened by the amount of opacity removed. The formula is 255 - ( 255 - x ) / opacity.

HTML Demo

<div class="example">
  <div class="img-container">
     <img src="https://www.yourdomain.com/sample.jpeg" />
  </div>
    <p>Plain</p>
</div>
<div class="example">
  <div class="img-container ">
     <img class="mix-blend-mode" src="https://www.yourdomain.com/sample.jpeg" />
  </div>
    <p>mix-blend-mode</p>
</div>
<div class="example">
  <div class="img-container layerd"><img src="https://www.yourdomain.com/sample.jpeg" /></div>
    <p>Opacitator</p>
</div>

SCSS Demo

$background-color: #d0d0d0;

body {
  background-color: $background-color;
  font-size: 12px;
}

.example{
  float: left;
  margin: 1em;
  p {
    font-size: 2em;
    text-align: center;
  }
}

.img-container{
  background-color: $background-color;
  height: 213px;
}

.mix-blend-mode{
  mix-blend-mode: multiply;
}

@function opacitator($color){
  $hi: 1;
  $lo: 0;
  $tol: 0.01;
  $rgbs: (red($color) green($color) blue($color));
  
  @while($hi - $lo > $tol){
    $m: $lo + (($hi - $lo) / 2);
    @if(getOpositesForOpacity($m, $rgbs, true)){
      $hi: $m;
    }
    @else{
      $lo: $m;
    }
  }
  $rgbs: getOpositesForOpacity($hi, $rgbs);
  @return rgba( nth($rgbs, 1), nth($rgbs, 2), nth($rgbs, 3), $hi);
}


@function getOpositesForOpacity($opacity, $rgbs, $returnValidity: false){
    $newList: ();
    $valid: true;
    @each $c in $rgbs{
      $newVal: oppositeForOpacity($opacity, $c);
      @if( $newVal >= 0 ){
         $newList: append($newList, $newVal);
      }
      @else{
        @return false; 
      }
    }
    @if($returnValidity ){
      @return $valid;
    }
    @else{
        @return $newList;
    }
}


@function oppositeForOpacity($opacity, $c){
    @return 255 - ( 255 - $c ) / $opacity;
}

.layerd {
  position: relative;
  &::after {
    content: " ";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: opacitator($background-color);
  }
}