Box Shadow生成 - CSSのbox-shadowを視覚的に作成

使い方

1. スライダーでX/Y/Blur/Spread/Colorを調整
2. 複数のシャドウレイヤーを追加可能
3. CSSコードをコピーして使用

よくある質問

複数の影を追加できますか？

はい。複数のbox-shadowを重ねて設定できます。

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

はい。コピーしたコードをそのままCSSファイルに貼り付けて使用できます。

insetシャドウに対応していますか？

はい。内側の影（inset）もON/OFFで切り替えられます。

データはサーバーに送信されますか？

処理はブラウザ上で完結し、データはサーバーに送信されません。

影が意図した通りに表示されない場合は？

blur（ぼかし）やspread（広がり）の値、色の透明度を調整してください。inset指定の有無も確認すると解決することがあります。

関連ツール