[CSS]画像のグラデーション処理は擬似要素でサクッと表現する

画像の上からグラデーションを被せる場合、画像で書き出すよりもCSSで表現した方が後々調整等も楽になります。

デモ

HTML

Img要素をdiv要素等で囲みます。
グラデーションはこの囲んだ要素に掛かります。
（要素の種類やclass名は自由）

<div class="gradation">
    <img src=“gazo.jpg” alt="">
</div>

CSS

囲んだ要素に対してpositionと擬似要素の設定を行います。

.gradation {
    position: relative;
}

.gradation::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: linear-gradient(90deg, #ffffff, transparent);
}

backgroundの部分でグラデーションの詳細を設定可能です。

background: linear-gradient(❶90deg, ❷#ffffff, ❸transparent);

deg前の数字で向きを調整（0deg〜360deg）
２、３　色を指定（現状は白から透明）

さらに細かい設定は以下を参考にしてください。

linear-gradient() - CSS: カスケーディングスタイルシート | MDN

linear-gradient() は CSS の関数で、二つ以上の色の連続的な直線に沿った変化から構成される画像を生成します。結果は データ型のオブジェクトであり、これは の特殊型です。

developer.mozilla.org