How to make a hole in <div> or a little about mix-blend-mode

Our company started updating the app and of course, updating the designs. Designers come and say: We thought and thought and came up with this modal:

What is a modal like a modal but not everything is so simple. The middle part of the modal should also be transparent and the outlines of the site background should be visible there.

For example, we will not create just such a modal, but a simplified one. So the HTML will look like this:

<div class="modal">
  <div class="header">
    <span class="header-text">
      Some text
    </span>
    <span class="close-button">&#x2715;</span>
  </div>
  <div class="content">
    <p>
      Some content
    </p>
  </div>
</div>

The basic CSS is as follows:

.modal {
  background-color: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(50px);
  max-width: 400px;
  max-height: 600px;
  padding: 8px;
  gap: 8px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  align-self: stretch;
}

.header-text {
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  padding-right: 8px;
}
.close-button {
  color: #fff;
}

.content{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  row-gap: 16px;
  align-self: stretch;
  border-radius: 8px;
  padding: 8px;
  background-color: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(50px);
  color: #fff;
  height: 200px;
}

The background card is arbitrary. The colors for the modal are taken from the designers' mockups in Figma and should be exactly like this. Otherwise, the dreaded QA will come and say that your color is wrong.

The result is as follows:

We see that our central div is not transparent and not very light despite the fact that it is white. What should we do so that the designers and QA do not beat us?

mix-blend-mode will come to our aid.

What is mix-blend-mode? MDN tells us that it is a property that sets how the content of an element should be combined with the content of the parent element and the background of the element.

mix-blend-mode has many options:

mix-blend-mode: normal;
mix-blend-mode: multiply;
mix-blend-mode: screen;
mix-blend-mode: overlay;
mix-blend-mode: darken;
mix-blend-mode: lighten;
mix-blend-mode: color-dodge;
mix-blend-mode: color-burn;
mix-blend-mode: hard-light;
mix-blend-mode: soft-light;
mix-blend-mode: difference;
mix-blend-mode: exclusion;
mix-blend-mode: hue;
mix-blend-mode: saturation;
mix-blend-mode: color;
mix-blend-mode: luminosity;

Some of them are similar to Instagram filters and can be used to make cool backgrounds.

We will need mix-blend-mode:lighten;

To fix our modal we wrap our modal content in another

and we get:

<div class="cover">
   <div class="content">
       <p>
          Some content
       </p>
   </div>
 </div>

Next, we make the background transparent and add our mix-blend-mode.

.cover{
  background: transparent;
  mix-blend-mode: lighten;
}

The background colors are mixed so that we actually now have a “transparent hole” in the middle of the image through which we can see the outlines of the background, and on top is the color that the designers asked us to use.

I do not exclude that there are other options for doing this, but today we will talk about this method of achieving the desired result.