CSS Mask Generator

CSS Mask Generator

mask-image グラデーションでコンテンツをフェードアウト・最大3レイヤー対応

━━━━━━━━━━━━━━━━━━━━━━━━

■ 概要

CSS の mask-image プロパティをGUIで生成するWebツールです。

上下左右・放射状（2種）の6方向グラデーションを最大3レイヤー重ね合わせて、コンテンツのフェードアウト効果を簡単に作れます。

ブラウザで無料で使えます。 https://devtools-hub.vercel.app/tools/css-mask-generator

━━━━━━━━━━━━━━━━━━━━━━━━

■ 主な機能

✓ 上 / 下 / 左 / 右 / 放射（中→外）/ 放射（外→中）の6方向を選択

✓ フェード開始位置・終了位置をスライダー（0〜100%）で設定

✓ 最大3レイヤーを重ね合わせて複雑なマスク効果を作成

✓ 各レイヤーに独立した方向・位置設定（A/B/Cカラーコードで識別）

✓ リアルタイムプレビューでマスク効果を即時確認

✓ -webkit-mask-image と mask-image の両方をカンマ区切りで出力

✓ ワンクリックでCSSをコピー

━━━━━━━━━━━━━━━━━━━━━━━━

■ 動作環境

・ ブラウザ（Chrome / Firefox / Edge / Safari）

・ インターネット接続不要（Webアプリ）

━━━━━━━━━━━━━━━━━━━━━━━━

■ 注意事項

・ 本ツールの使用によって生じた損害について作者は責任を負いません。