CSS Box Shadow ジェネレーター

§ 使い方

CSSのbox-shadowをビジュアルで生成する方法

リアルタイムプレビューとコピー対応コードで、繊細から印象的なものまであらゆる影を作成。

オフセットを設定する
X（水平）、Y（垂直）、Blur（ぼかし）、Spread（広がり）を設定。スライダーをドラッグしてすぐ結果を確認。
影の色を選ぶ
デフォルトは低い不透明度の黒（自然な影）。ブランドカラーを選ぶと「グロー」効果に。
複数レイヤーを重ねる（任意）
プロ仕様の影は2〜3レイヤー（近接シャドウ＋アンビエントシャドウ）の組み合わせ。重ねることでリアルな奥行きが出る。
CSSをコピーする
そのまま貼り付けOK。inset（内側の影）オプションとクロスブラウザプレフィックス付き。