Zakrycie potomków przez rodzica

Mam diva a w nim jakichś potomków. Konkretnie jest to slajder z wątku: Ukrycie elenemtów wychodzących poza div.
Chciałbym aby przysłonić na lewym i prawym krańcu białym kolorem (na razie jest czarny by widzieć łatwiej efekt) trochę bawiąc się jeszcze gradientem z przezroczystością tak by był ten efekt zanikania na końcach. Jednak nie mogę osiągnąć zamierzonego celu.
Kod html:

<div class="tab-description-cointainer">
//reszta slajder w środku jako potomek
</div>

Kod CSS:

.tab-description-shadow {
    width: 100%;
    height: 100%;
    display: grid;
    background: linear-gradient(to right, rgba(0, 0, 0, 1) 1%, rgba(255, 25, 255, 0) 10%, rgba(255, 255, 255, 0) 90%, rgba(255, 255, 255, 1) 99%);
    z-index: 100;
}

Jeśli ten gradient ma być na elemencie tab-description-cointainer to osobiście proponuję wsadzić gradient do pseudoelementów: tab-description-cointainer:after i tab-description-cointainer:before. Sam div dostaje position:relative a pseudoelementy postion: absolute, dzięki czemu, możesz je umieścić dokładnie tam gdzie chcesz w tym elemencie zawierającym. Gradient dostanie wtedy height: 100% i width odpowiednio mniejszą, 10% czy jak tam wolisz.

<div class="tab-description-shadow">
                    <div class="tab-description-cointainer">
//Itemki
</div>
</div>

CSS:

.tab-description-shadow {
    width: 100%;
    height: 100%;
    display: grid; //background: linear-gradient(to right, rgba(0, 0, 0, 1) 1%, rgba(255, 25, 255, 0) 10%, rgba(255, 255, 255, 0) 90%, rgba(255, 255, 255, 1) 99%);
    z-index: 100;
}

.tab-description-shadow:after {
    background: linear-gradient(to right, rgba(0, 0, 0, 1) 1%, rgba(255, 25, 255, 0) 10%, rgba(255, 255, 255, 0) 90%, rgba(255, 255, 255, 1) 99%);

}

.tab-description-shadow:before {
    background: linear-gradient(to right, rgba(0, 0, 0, 1) 1%, rgba(255, 25, 255, 0) 10%, rgba(255, 255, 255, 0) 90%, rgba(255, 255, 255, 1) 99%);

}

.tab-description-cointainer {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    width: 400%;
    overflow: hidden;
}

W takiej konfiguracji gradeint znika w ogóle.

Brak elementarnej znajmości CSS:

.tab-description-shadow 
{
       position: relative; /* jeżeli ma być after/before jako absolute to musi być tutaj ustawiony relative, inaczej before/after poleci Ci w kosmos */
}
.tab-description-shadow:after 
{
	content: ""; /* before/after musi mieć to ustawione inaczej się nie wyświetli poprawnie */
	position: absolute; left: 0; top: 0;  /* określasz position jako np. absolute albo relative, zależy co tam Ci bardziej pasuje */
        width: 100%; height: 100%; /* musisz określić wielkość elementu absolutnego w stosunku do relatywnego */
    background: linear-gradient(to right, rgba(0, 0, 0, 1) 1%, rgba(255, 25, 255, 0) 10%, rgba(255, 255, 255, 0) 90%, rgba(255, 255, 255, 1) 99%);
 
}