CSS Elements sharing the same linear gradient background

Question

I want to do a section in my project with elements sharing the same linear background image, that are all surrounded by a different color background.

I can sort of do with z-indexes and background: inherit, but the problem is that every element contains the whole gradient, not the part of it depending on it's position like I want.

Here is my attempt:

 .gradient { position: absolute; height: 100vh; width: 100vw; background: linear-gradient(90deg, rgba(242, 251, 95, 1) 0%, rgba(0, 89, 135, 1) 100%, rgba(99, 102, 23, 1) 100%); z-index: 100; display: flex; align-items: center; justify-content: center; gap: 100px; } .bg { position: absolute; min-width: 80%; height: 80%; background-color: red; } .circle { position: relative; border-radius: 50%; min-width: 100px; min-height: 100px; border: 2px solid green; background: inherit; display: flex; justify-content: center; align-items: center; z-index: 1; }

 <div class="gradient"> <div class="circle">ABC</div> <div class="circle">ABC</div> <div class="bg"></div> </div>

I'm having a hard time describing it in English so I included two pictures.

What I did

What I want

Answer 1

You could try moving the circles into the red div and giving that a mix blend mode and the circles a background of grey:

 .gradient { position: absolute; height: 100vh; width: 100vw; background: linear-gradient(90deg, rgba(242, 251, 95, 1) 0%, rgba(0, 89, 135, 1) 100%, rgba(99, 102, 23, 1) 100%); z-index: 100; display: flex; align-items: center; justify-content: center; } .bg { min-width: 80%; height: 80%; background-color: red; display: flex; align-items: center; justify-content: center; gap: 100px; mix-blend-mode: hard-light; } .circle { position: relative; border-radius: 50%; min-width: 100px; min-height: 100px; border: 2px solid grey; background: inherit; display: flex; justify-content: center; align-items: center; z-index: 1; background-color: grey; }

 <div class="gradient"> <div class="bg"> <div class="circle">ABC</div> <div class="circle">ABC</div> </div> </div>