Можно ли сделать градиент слева направо с непрозрачностью сверху?

Question

Посмотрите на это изображение, что я имею в виду, если я плохо объяснил: пример желаемого градиента

Использование псевдоэлементов и т. Д. Все в порядке, просто нужно найти рабочее решение:-(

Спасибо за ваше время!

Answer 1

Вы можете приблизить это используя blur фильтр:

.box {
  width:200px;
  height:200px;
  background:
    linear-gradient(to right,pink,blue) bottom/100% 50% no-repeat;
  position:relative;
  z-index:0;
  overflow:hidden;
}
.box:before {
  content:"";
  position:absolute;
  bottom:0;
  top:0;
  left:-10px;
  right:-10px;
  background:inherit;
  filter: blur(10px);
  background-size: 100% 70%;
}

body {
 background:yellow;
}

<div class="box">

</div>