CSS Blend Mode not working

Question

I would like to play with the CSS blend mode property but it seems like nothing is happening when I apply the rules.

Am I doing something wrong? I have applied the isolation rule to the parent and the mix-blend-mode to the element I want to play with.

Here's the code and a codepen example.

.day-old {
    position: relative;
    isolation: isolate;
}

.day-old:before {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 99.9%;
    height: 38px;
    content: "";
    background: rgba(0, 0, 0, 0.5);
    z-index: -1;
}

.day-old .day-row {
    opacity: 0.5;
}

.day-row {
    display: -ms-flexbox;
    display: flex;
    width: 100%;
}

.day {
    background: #f5f5f5;
    margin: 0;
}

.day span {
    display: block;
    padding: 10px;
}

.availability {
    display: flex;
    width: 100%;
    text-align: center;
     margin: 0;
}

.slot {
    display: block;
    padding: 10px 0;
    color: #3c763d;
    background: #dff0d8;
    width: 100%;
    box-shadow: -1px 0px 0px #c7d9b9 inset, 0px -1px 0px #c7d9b9 inset;
    mix-blend-mode: screen;
}

<div class="day-old">
    <div class="day-row">
     <p class="inner day"><span><strong>13/04</strong></span></p>
     <p class="availability">
       <span class="slot">
         <strong>2500</strong>                                              </span>
     </p>
  </div>
</div>
                     

Thanks

Answer 1

The code you have written is working, but the effects don't seem so obvious due to the color you have chosen. The mix-blend-mode property you have used achieves best results when used with a background image. You can combine the background image and background color property. An example would be:

<div class=”container”>
  <h1 class=”header-text”>Hello world</h1>
</div>

.container {
  background-image: url(‘image.png’);
  background-size: cover;
}

.header-text {
  font-size: 7rem;
  text-transform: uppercase;
  color: #fff;
  text-align: center;
  background-color: darkcyan;
  mix-blend-mode: multiply;
}

You can also check our an interesting article here that might help further explain the property.