Как реализовать данный градиент?

Question

в макете указано только это

а когда копировать из фигмы, то получается background: linear-gradient(180deg, #002638 61.58%, rgba(0, 38, 56, 0) 100%);

но когда вставлять через псевдо- вообще не похоже

.item {
position: relative;
  width: 150px;
  height: 150px;
background: #FCFBFC;
padding: 20px;
}

.item:after {
  position: absolute;
  content: ' ';
  left: 20px;
  width: calc(100% - 40px);
  height: 30px;
 bottom: 0px;
  background: linear-gradient(180deg, #002638 61.58%, rgba(0, 38, 56, 0) 100%);

}

<div class="item">
Якісний товар, привітний персонал який радо прийде на допомогу, покаже, проконсультує. Окремо хочу подякувати за гарантійне обслуговування  речей.
</div>

Answer 1

Так должно быть?

.item {
  position: relative;
  width: 150px;
  height: 150px;
  background: #FCFBFC;
  padding: 20px;
  /**/
  color: transparent;
  background-clip: text;
  background-image: linear-gradient(180deg, #002638 61.58%, rgba(0, 38, 56, 0) 100%);
  /**/
}

.item:after {
  position: absolute;
  content: ' ';
  left: 20px;
  width: calc(100% - 40px);
  height: 30px;
  bottom: 0px;
}

<div class="item">
  Якісний товар, привітний персонал який радо прийде на допомогу, покаже, проконсультує. Окремо хочу подякувати за гарантійне обслуговування речей.
</div>

БЛОГ НА HUSL

Как реализовать данный градиент?

Ответы (1 шт):