CSSで画像同士をグラデーションさせる方法【透過画像の作り方】 | GUARDIAN Creative BLOG | 初期無料のサブスク型ホームページ制作｜7万実績のWEB戦略とAIで成果を出す

海辺の画像を<img>タグで指定し、その上から読書する女性の画像を重ねています。

その際、.backgroundクラスにmask-imageをかけています。

注意点として、mask-imageはまだ新しめのCSSプロパティのため、ベンダープレフィックスをつけましょう。

-webkit-をつけることで主要なブラウザには対応できます。

また、下記のように小さい画像をサブ的に表示させるのにも使えるかもしれませんね！

していることは同じで、.backgroundクラスにradial-gradientをかけているだけです。

また、円形ではなく下記の画像のように、四角形の四辺を透過させるにはどうしたらいいのでしょうか？

これは色々調べたのですが、おそらく.backgroundクラスのmask-imageだけではできないと思われ、

下記のようにさらにもう一階層HTMLを入れ子にして、.vertical_gradと.horizontal_gradにそれぞれmask-image+linear-gradientをかける方法で実現できました。

（もっとスマートな方法を知っている方がいたら教えてください！）

いかがでしょうか？

今回は、CSSだけを使って二枚の画像を透過グラデーションで重ね合わせる方法を解説しました。

割と使いどころが多そうな手法なのではないでしょうか。

一枚の画像としてフォトショップ等で重ねちゃうのも手ですが、弊社のようにCMSを使って画像を自由に差し替えられる仕様にする場合は、とても有用な手法だと思います！

ぜひ、ご参考になさってください！