Линейный градиент над тегом <div>с CSS

Question

Я хочу добавить градиент в верхнюю часть содержимого вкладок с независимой прокруткой, чтобы содержимое не обрезалось в нижней части вкладок при прокрутке вверх. Цель состоит в том, чтобы контент стал белым за вкладками выше. Как мне go добавить этот градиент, чтобы он располагался над содержимым вкладки и достигал этого эффекта наилучшим образом? Изображения ниже лучше объясняют эффект, к которому я стремлюсь:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<div class="col-xs-12 col-sm-12 col-md-6">
  <div class="row r-tabs">
    <div class="tab-bar">
      <button class="bar-item tab-active" onclick="openTab(event, 'section1')">Summary</button>
      <button class="bar-item" onclick="openTab(event, 'section2')">Images</button>
      <button class="bar-item" onclick="openTab(event, 'section3')">Contact</button>
      <button class="bar-item" onclick="openTab(event, 'section4')">Help</button>
    </div>
  </div>

  <div id="section1" class="tab-content">
    <div class="card">
      <div class="card-body model-btn-card">
        <div class="viewing text-black">

        </div>
      </div>
    </div>

Answer 1

Вы можете стилизовать элемент: before для div, например:

div {
  position: relative;
}

div: before {
  content: '';
  top: -2px;
  left: 0;
  width: 100%;
  height: 15px;
  background: linear-gradient(to top, transparent, #fff);
}

Не тестировал, но что-то вроде этого должно работать.