画像のフチぼかし（透過グラデーションマスク）のCSSジェネレーター
画像の端を透過グラデーションでぼかし、背景と滑らかに馴染ませるエフェクトを生成します。mask-imageを使用し、上下左右や円形など複数の方向にフェードアウト可能です。
プレビュー
<div class="image-fade-mask">
<img src="{{img_url}}" alt="画像">
</div>.image-fade-mask {
display: inline-block;
width: fit-content;
}
.image-fade-mask img {
display: block;
max-width: 100%;
height: auto;
/* マスク設定 */
-webkit-mask-image: {{gradient_value}};
mask-image: {{gradient_value}};
}機能、使い方
- 画像の端を透過グラデーションでぼかし、背景（背景色や背景画像）と滑らかに馴染ませるためのコードを生成します。
- 上下左右の直線的なぼかし（
linear-gradient）に加え、中央から外側へ向かう円形のぼかし（radial-gradient）にも対応しています。 - ぼかしの開始・終了位置（パーセンテージ）を調整することで、透過の範囲を自在にコントロール可能です。
- 背景画像と手前の要素を調和させたい「ヒーローバナー」や「サムネイル画像」の装飾に適しています。
CSSプロパティの説明
mask-imageは要素の内容を透明なレイヤーで覆い、黒色の部分は表示、透明な部分は非表示にするプロパティです。
linear-gradientを使用したマスクでは、指定した方向に向かって徐々に透明度が高まるグラデーションを適用しています。
radial-gradientを使用したマスクでは、中心から放射状に広がる透過処理を行い、画像の中心部分を強調する際に利用します。
古いウェブブラウザへの互換性のため、-webkit-mask-imageを併記しています。
