How to make a background appear over a child element that has it's own background colour

Question

I have a scrollable container element with children:

<ul class="scroll-shadows">
  <li>Adipisci, totam.</li>
  <li>Error, dicta.</li>
  <li class="disabled-item">Disabled input</li>
  <li>Eveniet, dolorem!</li>
  ...
</ul>

The scrollable container has a top shadow (background):

background:
  linear-gradient(
    gray, white
  ) center top;

The child item is disabled and has a background-color:

.disabled-item {
  background-color: #F6F6F7;
}

The problem is that the background colour for the disabled element appears over the background shadow. Is there a way to prioritize the shadow over the background color so that the shadow appears on top?

What I have tried:

• Tried to use the background-blend-mode, but had no effect.
• Tried to use z-indexes, but had no effect.

You can see the problem here:

// just so demo loads scrolled down a little.
document.querySelector(".scroll-shadows").scrollTop = 30;

.disabled-item {
  background-color: #F6F6F7;
}

.scroll-shadows {
  width: 600px;
  max-height: 300px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch;

  background:
    /* Shadow TOP */
    linear-gradient(
      gray, white
    ) center top;
  
  background-repeat: no-repeat;
  background-size: 100% 60px;
  background-attachment: scroll;
}



/* Not important to the functionality, just for this particular demo */
.scroll-shadows {
  list-style: none;
  padding-left: 1rem;
  padding-right: 1rem;
}
.scroll-shadows > * {
  padding: 0.2rem;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  height: 100vh;
  display: grid;
  place-items: center;
  font: 500 100% system-ui, sans-serif;
}
.scroll-shadows {
  --scrollbarBG: transparent;
  --thumbBG: #90a4ae;

  scrollbar-width: thin;
  scrollbar-color: var(--thumbBG) var(--scrollbarBG);
}
.scroll-shadows::-webkit-scrollbar {
  width: 8px;
}
.scroll-shadows::-webkit-scrollbar-track {
  background: var(--scrollbarBG);
}
.scroll-shadows::-webkit-scrollbar-thumb {
  background-color: var(--thumbBG);
  border-radius: 6px;
  border: 3px solid var(--scrollbarBG);
}

<div>
  <ul class="scroll-shadows">
    <li>Adipisci, totam.</li>
    <li>Error, dicta.</li>
    <li class="disabled-item">Disabled input</li>
    <li>Eveniet, dolorem!</li>
    <li>Id, tempora!</li>
    <li>Voluptate, consectetur?</li>
    <li>Voluptatibus, omnis.</li>
    <li>Eius, fugit.</li>
    <li>Quia, non!</li>
    <li>At, laudantium?</li>
    <li>Commodi, maiores!</li>
    <li>Lorem</li>
    <li>Ipsum</li>
    <li>Dolor</li>
    <li>Sit</li>
    <li>Amet</li>
  </ul>
</div>

CodePen: https://codepen.io/Radek-Skrabal/pen/oNJzMEQ

Answer 1

You can try adding a mix-blend-mode with the 'darken' value to the .disabled-item element; it would look something like this:

.disabled-item {
  background-color: #F6F6F7;
  mix-blend-mode: darken;
}