Как сделать градиент элемента HTML?

Question

[Timpixel]

Мне очень понравился некоторый дизайн Нетфликса
Один из них - градиент из главной страницы по типу серый>>прозрачный
Только хотелось бы понять, как сделать такой градиент с элементом, например <video>
Только не от цвета до прозрачного, а от элемента до прозрачного
Пример на скрине:


Желательно, что бы градиент был только одной стороны, как на скрине
Как это сделать, и возможно ли это?
Помогите пожалуйста!
Не знаю как, но может я объяснил не очень понятно, но объяснил как мог

Answer 1

[Anonymous Penguin]

Можно сделать внутненнюю тень белого цвета с отрицательным spread

<div class="fade">...</div> <!-- блок для градиента -->

.fade {
  //...
  box-shadow: inset 0 -20px 10px -10px #fff;
}

Comments

[Timpixel]

чего то не получается((
не с div, не с video

[Anonymous Penguin]

Тимур Мамедов, то что с div не получается - это странно. Покажи HTML и CSS, который ты пробовал. А с Video такой трюк просто так не прокатит - нужно сделать блок поверх него и уже ему давать тень

[Timpixel]

Anonymous Penguin,
index.php:

<div id="div2">
        <video src="<?= $_SESSION['td']['thrailer_url'] ?>" id="thrailer_main"></video>
    </div>

main.css

#div2{
    box-shadow: inset 0 -20px 10px -10px #fff;
}

[Anonymous Penguin]

Тимур Мамедов,

#div2 {
  position: relative;
  display: inline-block;
}
#div2:before {
  content: '';
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: 999;
  box-shadow: inset 0 -20px 10px -10px #fff;
}

[Timpixel]

Anonymous Penguin,
вакханалия какая-то получилась((
Пробовал даже менять #fff на:

box-shadow: inset 0 -20px 10px -10px rgba(255, 255, 255, 0);

но он просто пропадал

Answer 2

[ArseniyInformation]

https://html5book.ru/css3-gradient/