CSS Elements sharing the same linear gradient background

user_19572479 0
Viewed 43

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

css html
1 Answers

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>

user_17909820
Related