Как сделать сторону блока таким прозрачным css?

Question

Чёт не получается, такое сделать подскажите как примерон такое делается спасибо

Answer 1

С помощью Mask Image

#c {
    height: 100px;
    width: 100px;
    -webkit-mask-image:-webkit-gradient(linear, left top, right top, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
    mask-image: linear-gradient(90deg, rgba(0,0,0,1), rgba(0,0,0,0));
}

#p {
    height: 150px;
    width: 150px;
    background: #00f;
}

<div id="p">
    <img src="https://developer.mozilla.org/files/3537/linear-gradient.png" id="c" />
</div>

БЛОГ НА HUSL

Как сделать сторону блока таким прозрачным css?

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