マルチレイヤー box-shadow ジェネレーター
影を何層も重ねて、立体感のあるCSS box-shadowを作成
box-shadowを複数重ねると、単一の影よりもずっと滑らかで立体的な表現ができます。レイヤーごとに位置、ぼかし、色、不透明度を個別に調整しながらプレビューで即座に確認でき、完成したCSSコードはそのままコピーしてプロジェクトに貼り付けられます。処理はすべてブラウザ内で行われ、サーバーへ送信されることはありません。
도구를 불러오는 중…
🔒 すべてブラウザ内で処理されます。アップロードしたファイルや入力内容がサーバーに送信されることはありません。
使い方
- ソフトシャドウ、ネオングロー、レトロ3Dのプリセットから好みのものを選んで始めます。
- レイヤー一覧から編集するレイヤーを選び、X/Yオフセット、ぼかし、広がり、不透明度のスライダーを調整します。
- カラーピッカーまたはHEXコードの入力で影の色を変更し、必要に応じて内側の影(inset)をオンにします。
- 「+ レイヤーを追加」ボタンで層を重ねたら、完成したCSSをコピーして利用します。
よくある質問
- レイヤーはいくつまで追加できますか?
- 上限はなく、好きなだけ追加できます。ただしレイヤーが1つだけになった場合は、それ以上削除できません。
- 生成されたCSSはそのまま使えますか?
- はい。box-shadow: ... の形式でコピーされるので、CSSファイルやstyle属性にそのまま貼り付けてお使いいただけます。
- プリセットを選んだあとに値を変更すると、プリセットも変わりますか?
- いいえ。プリセットはあくまで出発点です。選択後はスライダーで自由に値を変更し、オリジナルの影を作成できます。