Как сделать градиент без ребристости?

Question

вот код

.item-info {
position: absolute;
bottom: -223px;
color: #FFF;
/*background: #151515;*/
height: 234px;
transition: all ease-in-out .3s;
padding: 20px;
font-style: normal;
font-weight: normal;
font-size: 18px;
line-height: 22px;
background: linear-gradient(
        348deg
        ,#151515,#151515 100.5px,#151515 0,#151515 208px,transparent 0);
}

<div class="item-info"></div>

Answer 1

Сравните значение свойства background: linear-gradient, которое в вашем коде, с этим:

background: linear-gradient(348deg, #151515, #151515 250px, transparent 252px, transparent 100%);

Ключевые #151515 250px, transparent 252px, - переход из одного цвета в другой, например 2px

Вот результат:

.item-info,
.item {
  width: 300px;
  height: 300px;
}

.item {
  position: absolute;
  top: 0;
  left: 0;
  width: 300px;
  height: 300px;
  background: linear-gradient(348deg, #151515, #151515 250px, transparent 252px, transparent 100%);
}

.item-info img {
  width: 200px;
}

<div class="item-info"><img src="https://i.imgur.com/SPbeVMa.jpg">
  <div class="item"></div>
</div>

Answer 2

Сделал так background: linear-gradient( 168deg , transparent, transparent 25.6%, #151515 26.3%);

БЛОГ НА HUSL

Как сделать градиент без ребристости?

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