このツールについて
box-shadow プロパティは見た目より奥が深く、オフセット・ぼかし・広がり・色・inset キーワードが互いに影響し合い、本当の立体感はたいてい複数の影を重ねることで生まれます。このジェネレーターは各値にスライダーを用意し、複数のレイヤーを追加できるので、控えめなカードの浮き上がりから大胆なニューモーフィズムまで作れます。
すべてがライブプレビューで更新され、完成した box-shadow の CSS はコピー一つで手に入ります。すべてブラウザ内で動作します。
よくある質問
複数のシャドウを重ねることはできますか？
はい。「Add Layer」をクリックするとシャドウを追加で重ねられます。これらはカンマ区切りの1つのbox-shadow値にまとめられ、最初のレイヤーが一番上に表示されます。
「inset」チェックボックスは何をしますか？
そのレイヤーを外側に落ちるドロップシャドウから、要素の枠線の内側に表示される内側シャドウに切り替えます。押し込まれたようなへこみ効果を作るのに便利です。
シャドウの透明度はどのように処理されますか？
不透明度スライダーとカラーピッカーを組み合わせて8桁の16進数カラー（#rrggbbaa）を生成します。カラー入力単体ではアルファチャンネルを保持できないため、これにより本当のアルファ透明度が得られます。
作成したデザインのデータはどこかにアップロードされますか？
いいえ、シャドウのプレビューとCSS出力はすべてブラウザ内で生成されます。サーバーへのアップロードや保存は一切ありません。
スプレッド（spread）にマイナスの値を設定すると何が起きますか？
マイナスのスプレッド値は、ぼかしを適用する前にシャドウの形を縮小します。これはシャドウを要素本体よりも細く、タイトに見せたいときによく使われます。