JSFiddle - React, Tailwind, and code Playground

by ckissi

HTML

<div class="fade-sides" style="backgroud-color:#424244">
  a erqewr qwer qwer qwer qwerq wer
</div>

CSS

.faded-sides {
    position: relative;
    background: #343fff; /* Your desired background color */
    padding: 20px;
    overflow: hidden;
}

.faded-sides::before,
.faded-sides::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100px; /* Width of the fade effect */
    pointer-events: none; /* Allows clicks to pass through */
}

.faded-sides::before {
    left: 0;
    background: linear-gradient(to right, rgba(255,255,255,1), rgba(255,255,255,0));
}

.faded-sides::after {
    right: 0;
    background: linear-gradient(to left, rgba(255,255,255,1), rgba(255,255,255,0));
}