CSS: Clear background

September 16, 2022

I wanted to ask if it is possible to "clear" the background of an element using CSS

Here is an example (somewhat what I mean):

.background {
  width: 150px; 
  height: 150px; 
  background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/220px-Image_created_with_a_mobile_phone.png');
  display: fixed;
  padding: '16px';
  overflow: auto;
}

.container {
  display: fixed;
  width: 100%;
  height: 100%;
}

.item {
  height: 35px;
  background-color: rgba(255,255,255,0.5);
  margin: 12px;
}

.item-gradient {
  height: 35px;
  margin: 12px;
  background-image: linear-gradient(rgba(255,255,255,0.5), transparent);
}

<div class="background">
  <div class="container">
    <div class="item">
      item #1
    </div>
    <div class="item">
      item #2
    </div>
    <div class="item-gradient">
      item #3
    </div>
    <div class="item">
      item #4
    </div>
    <div class="item">
      item #5
    </div>
    <div class="item">
      item #6
    </div>
  </div>
</div>

In the snippet I have directly applied a gradient to the last item, however, I want the gradient to remain there as I scroll through the items. Is this possible using CSS?

EDIT: an image for reference:

enter image description here

E.g I want the bottom of the container to have a gradient from the background

>Solution :

You can approximate it using mask and an extra wrapper:

.background {
  width: 150px; 
  height: 150px; 
  background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/220px-Image_created_with_a_mobile_phone.png');
}

.wrapper {
  height: 100%; 
  overflow: auto;
  -webkit-mask: 
    linear-gradient(#000 0 0) right/20px 100% no-repeat,
    linear-gradient(#000 70%,#0000);
}
.item {
  height: 35px;
  margin: 12px;
  background: rgba(255,255,255,0.5);
}

<div class="background">
<div class="wrapper">
  <div class="container">
    <div class="item">
      item #1
    </div>
    <div class="item">
      item #2
    </div>
    <div class="item">
      item #3
    </div>
    <div class="item">
      item #4
    </div>
    <div class="item">
      item #5
    </div>
    <div class="item">
      item #6
    </div>
  </div>
  </div>
</div>