selector { position: relative; overflow: hidden; } selector::before, selector::after { content: ”; position: absolute; top: 0; bottom: 0; width:400px; /* Change this*/ pointer-events: none; z-index: 1; } selector::before { left: 0; Z-index: 2 !important; background: linear-gradient(to right, #000, transparent) !important; } selector::after { right: 0; background: linear-gradient(to left, #000, transparent) !important; }
///or
selector{
position: relative;
overflow: hidden;
}
/* Gradient overlay */
selector::before,
selector::after{
content: ”;
position: absolute;
top: 0;
bottom: 0;
width: 400px; /* Gradient width */
pointer-events: none;
z-index: 2;
}
/* Left gradient */
selector::before{
left: 0;
background: linear-gradient(to right, #000, transparent);
}
/* Right gradient */
selector::after{
right: 0;
background: linear-gradient(to left, #000, transparent);
}
