Horizontall scrolling div shadow does not cover the child background

Question

I have horizontal scrolling container, that contains child´s with background-color. I tried to add shadow but its not working for ovarlay child background. Z-index didn't help me in this case.

There is any way to achieve this?

.container {
    overflow-x: auto;
    background-image: linear-gradient(to right,white,white),linear-gradient(to right,white,white), linear-gradient(to right,rgba(0,0,0,0.25),rgba(255,255,255,0)), linear-gradient(to left,rgba(0,0,0,0.25),rgba(255,255,255,0));
    background-position: left center,right center,left center,right center;
    background-repeat: no-repeat;
    background-color: white;
    background-size: 20px 100%,20px 100%,20px 100%,20px 100%;
    background-attachment: local,local,scroll,scroll;
}

.tag {
    display: inline-flex;
    align-items: center;
    padding: 0 var(--theme-padding-sm);
    border-radius: var(--theme-radius); 
    justify-content: center;
    width: var(--theme-width-md);;
    height: var(--theme-height-md);
    background: var(--topic-tag-background);
    border: 2px solid transparent;
   
}

BO

expected result

user_18312494 · Answer

Just an idea, you can work around to achieve your desired result. But if you create an ::after pseudoselector to place your shadow (in this case I've included a gradient because is more flexible than an image) you can manage it better.

.container  {
    position: relative;
    width: 150px;
}

.container::after {
    content: "";
    position: absolute;
    width: 15px;
    height: 100%;
    top: 0;
    right: 0;
    background: rgb(0,0,0);
    background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.4682247899159664) 100%);
}

.container-overflow {
    width: 100%;
    overflow: hidden;
    overflow-x: scroll;
}

.tag-container {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: center;
}

.tag {
    padding: 0 var(--theme-padding-sm);
    border-radius: var(--theme-radius); 
    justify-content: center;
    width: var(--theme-width-md);;
    height: var(--theme-height-md);
    background: var(--topic-tag-background);
    border: 2px solid transparent;
}

Horizontall scrolling div shadow does not cover the child background

1 Answers