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