画像の上からグラデーションを被せる場合、画像で書き出すよりもCSSで表現した方が後々調整等も楽になります。
デモ
![](https://mirailog.jp/wp/wp-content/uploads/2021/07/cat-4912211_1920-1024x683.jpg)
HTML
Img要素をdiv要素等で囲みます。
グラデーションはこの囲んだ要素に掛かります。
(要素の種類やclass名は自由)
<div class="gradation">
<img src=“gazo.jpg” alt="">
</div>
imgタグだけでは擬似要素が設定できないため、囲み要素が必要になります。
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)
2、3 色を指定(現状は白から透明)
さらに細かい設定は以下を参考にしてください。