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.
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.
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;
}
rgba()
will fake the opacity for us.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.
#snippet #css background #css #background