I came across an interesting bit while working on the hero section of my z-index guide. I needed a way to apply an opacity for the background.

Here is the final result I want to achieve..

At the first glance, it might be tempting to say that it’s easy. However, it’s a bit more detailed. Let’s dig into the details of it.

The layers

For me, 3D is a good way to imagine how to stack the layers. I also made a video to make it more clear.

If you’re not into 3D, it’s totally fine. Here is a normal view of all the layers.

The requirements

To implement that, we can use multiple CSS gradients. Here is how I did it:

:root {
  --oval-w: 50%;
  --oval-h: 70%;
  --base-color: rgba(194, 236, 231, 0.8);
  --pattern: url("hero-bg.svg");
}

.hero {
  min-height: 400px;
  background: linear-gradient(var(--base-color), var(--base-color)),
    radial-gradient(#c2ece7 25%, transparent) center/50% 90% no-repeat,
    var(--pattern) center/cover no-repeat;
}

Code explanation

With that, I used the pattern image as it is without altering its opacity manually. I can change the background color the way I want without using a design program in case I changed the pattern.

What do you think about my solution? Do you have a better idea of how to tackle this? If yes, please feel free to tweet me @shadeed.

Demo