HTML/CSS transparency through multiple layers

Question

Is it possible to create an element, that creates a transparency through x-number of layers 'behind' it?

Example: I have layers with z-indexes 1,2,3,4, whereas 1 is red. I then create a '5th' layer, that I want to cut through the colors of layers 2,3,4 and see the red color through. Is that possible?

Answer 1

You can experiment with the new mix-blend-mode and/or background-blend-mode (if you have background images) which is currently in candidate recommendation for Compositing and blending Level 1.

References: blend modes, and mix-blend-mode.

Be advised though, that this is currently not supported by IE, Edge and Opera.

In the example below, you can see that the top-level div shows red seeping thru from the lowest-level div.

Example Snippet:

.red { background-color: red; }
.blue { background-color: blue; }
.green { background-color: green; }
.yellow { background-color: yellow; }
div { 
    width: 120px; height: 120px;
    position: absolute; 
    top: 16px; left: 16px;
}
div:nth-of-type(2) { top: 32px; left: 32px; mix-blend-mode: difference; }
div:nth-of-type(3) { top: 48px; left: 48px; mix-blend-mode: overlay;}
div:nth-of-type(4) { top: 64px; left: 64px; mix-blend-mode: multiply; }

<div class="red">1</div>
<div class="blue">2</div>
<div class="green">3</div>
<div class="yellow">4</div>

Answer 2

Transparensy trough multiple elements

Lets try it out:

div {
  width: 500px;
  height: 300px;
  border: 50px solid transparent;
}
.a1 {
  background-color: rgba(255, 0, 0, 1);
}
.a2 {
  background-color: rgba(255, 165, 0, 0.5);
}
.a3 {
  background-color: rgba(0, 128, 0, 0.5);
}
.a4 {
  background-color: rgba(0, 0, 255, 0.5);
}
.a5 {
  background-color: rgba(238, 130, 238, 0.5);
}

<div class="a1">
  <div class="a2">
    <div class="a3">
      <div class="a4">
        <div class="a5">
        </div>
      </div>
    </div>
  </div>
</div>

Seems like there is transparency trough all elements.