Search code examples
csstransparencyopacitymix-blend-mode

Can you use CSS blend modes to stack semi-transparent divs cleanly?

I want to have a stack of DIVs, like cards, that have a semi-transparent background. However I don't want their alpha values to add up when doing so. For instance in the example below where my two cards overlap:

![Overlapping cards

I want the overlapping area to not be darker but the same color as the individual cards (they're all the same opacity and color). I know I could put a "backing" div to reset the alpha and mimic this effect but that would be obvious as the background is not a flat color.

I'm looking at mix-blend-mode and background-blend-mode but can't figure out if any of them achieve the effect I'm looking for. As someone familiar with Photoshop I don't believe any of these options would work but hoping someone knows what that does.

The only alternative I can think of is programmatically making long narrow DIVs and attaching them to the bottom of my top card to simulate the stacking effect. However then I'm not sure how to best reveal subsequent cards as required.

Solution

  • You can simulate this use mask:

    .box {
  height:300px;
  position:relative;
  background:url(https://picsum.photos/id/1018/800/600) center/cover
}
.box::before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:rgba(0,0,0,0.5);
  -webkit-mask:
    /* your first div          position  /  size  */
    linear-gradient(#fff 0 0)  20px 50px / 30%  20%,
    /* your second div         position  /  size  */
    linear-gradient(#fff 0 0)  30px 50px / 20%  30%,
    /* your third div          position  /  size  */
    linear-gradient(#fff 0 0)  80%  0    / 100px 200px;
    /*and so on ...*/
  -webkit-mask-repeat:no-repeat;
}
    <div class="box">

</div>