🌓 マルチレイヤーボックスシャドウ生成ツール

box-shadowを複数枚重ねることで、単一の影よりもはるかに柔らかく立体的な奥行き表現ができます。FigmaなどのモダンなUIデザインでもよく使われる手法です。各レイヤーのオフセット・ぼかし・広がり・色・不透明度をプレビューを見ながら調整し、完成したCSSコードをそのままコピーして使えます。処理はすべてブラウザ内で完結し、サーバーには送信されません。

使い方

1. 「柔らかい影」「ネオングロー」「レトロ3D」からプリセットを選んで開始します。
2. レイヤー一覧から編集したいレイヤーを選び、X/Yオフセット・ぼかし・広がり・不透明度のスライダーを調整します。
3. カラーピッカーまたはHEXコードで影の色を変更し、必要に応じて内側の影(inset)をオンにします。
4. 「+ レイヤー追加」で層を増やし、完成したCSSコードをコピーして使用します。

よくある質問

レイヤーはいくつまで追加できますか?

上限はなく、好きなだけ追加できます。ただしレイヤーが1つだけになると削除はできません。

生成されたCSSはそのまま使えますか?

はい、box-shadow: ... の形式で出力されるので、CSSファイルやstyle属性にそのまま貼り付けられます。

プリセット選択後に値を変更すると、プリセット自体が変わりますか?

いいえ、プリセットはあくまで出発点です。読み込んだ後はスライダーで自由に調整して独自の影を作れます。