Как я могу затушевать вертикальный градиент по горизонтали на его кончиках?

Question

Я изо всех сил пытаюсь найти хороший способ исчезнуть вертикальный градиент на его левой и правой сторонах.В основном, верхний-нижний градиент с левым и правым краями затенен до 0% непрозрачности.

Мне нужно, чтобы он был прозрачным, чтобы он мог быть поверх изображений / видео.

Вот краткое изложение того, к чему я стремлюсь:

Есть предложения?

Answer 1

Используйте несколько фонов .Первый сверху.

div {
  width: 100%;
  height: 100px;
  background-image: linear-gradient( to right, white 0%, transparent 30%, transparent 70%, white 100%),
  linear-gradient( to bottom, Lightgreen, Aquamarine);
}

<div></div>

Answer 2

Вы можете попробовать несколько фонов, как это:

.box {
  width: 500px;
  height: 80px;
  margin:auto;
  background:
   radial-gradient(ellipse at top, #7ff5b0 20%, transparent 70%) top center/80% 100%,
   linear-gradient( to right, transparent 0%, #19d9ef 30%, #19d9ef 70%, transparent 100%);
  background-repeat:no-repeat;
      color: ;
    color: ;
}
body {
  background:pink
}

<div class="box"></div>

Answer 3

Довольно просто, вам просто нужно добавить прозрачный в линейный градиент.

div {
      background:linear-gradient(to right, transparent, #00F5CB, transparent);
      width: 100%;
      height:64px;
    }

<div></div>