🌫 CSS box-shadow ジェネレーター
スライダーで box-shadow をビジュアル編集。複数シャドウを重ねてリアルタイムプレビュー、CSS をコピーできます。
✅ 完全無料・登録不要・サーバー送信なし
🔒 プライバシーについて
- ・すべての処理はブラウザ内で完結します
- ・入力データは一切サーバーに送信されません
- ・保存ログ・履歴・データベース等は存在しません
- ・登録・ログイン・課金は一切不要です
シャドウ レイヤー
プリセット
📖 使い方
-
1
スライダーを調整x / y オフセット、ぼかし、広がり、色、inset を調整。プレビューが即座に変わります。
-
2
レイヤーを重ねる追加ボタンで複数のシャドウを重ねられます。Material 風や Neumorphism も実現可能。
-
3
CSS をコピー生成された box-shadow プロパティをコピーして CSS に貼り付け。
❓ よくある質問
入力データはサーバーに送信されますか？
いいえ。すべてブラウザ内で完結します。Network タブで確認可能です。
inset とは何ですか？
inset を有効にすると、シャドウが要素の外側ではなく内側に描画されます。へこみ・凹み表現に使えます。
シャドウは何個まで重ねられますか？
上限はありませんが、レンダリング負荷を考えると 5 個程度までが現実的です。