CSS Box Shadow ジェネレーター
複数レイヤーで影をデザインし、すぐに使えるCSSコードを取得
影コントロール
ライブプレビュー
CSS出力
使用例
控えめなカードシャドウ
カードやコンテンツコンテナに最適な、軽く控えめな影。
マルチレイヤーシャドウ
複数の影レイヤーを組み合わせて、豊かで重層的な奥行き効果を作成。
インセットシャドウ
押されたまたは凹んだ要素効果のための内側影を作成。
機能
複数の影レイヤー
複雑でリアルな影効果を作成するために複数の影レイヤーを追加・設定
ライブビジュアルプレビュー
オフセット、ぼかし、広がり、色を調整するとリアルタイムで影効果が更新
カラーピッカーとプリセット
ネイティブピッカーでカスタム色を選択し、素早いデザインのためにプリセット影を使用
プライバシー優先
すべてブラウザ内で実行 — データはサーバーに送信されません
使い方
影を設定
各影レイヤーのX/Yオフセット、ぼかし、広がり、色を調整します。内側影にはインセットを切り替えます。
レイヤーを追加
より複雑な効果のために追加の影レイヤーを作成するにはレイヤー追加をクリックします。
CSSをコピー
CSSコピーボタンをクリックして、生成されたbox-shadowコードをクリップボードにコピーします。
よくある質問
Box Shadowジェネレーターとは？
Box Shadowジェネレーターは、手書きのコードなしでCSS box-shadowエフェクトをデザインできるビジュアルツールです。X/Yオフセット、ぼかし、広がり、色のスライダーを調整すると、CSSがリアルタイムで更新されます。理想の見た目になるまで試して、コードをコピーするだけです。
主な機能
複数の影レイヤーに対応しており、ソフトとハードな影を組み合わせて奥行きを表現できます。各レイヤーには独自のカラーピッカーとインセット切替があります。控えめなカード、フローティング要素、レイヤード深度エフェクトなど、よく使うスタイルのプリセットも用意されています。
よくある使用例
カードコンポーネントやモーダルには微妙な浮遊感が必要です。ボタンはホバー時の軽い影で見栄えが良くなります。インセット影は入力フィールドや押下状態のボタンに最適です。マルチレイヤーの影はヒーローセクションにプレミアムな印象を与えます。
より良い影のためのヒント
自然な見た目にするには、ぼかし値を広がりより高く保ちましょう。べた塗りの色ではなく半透明の黒（rgba(0,0,0,0.1)など）を使いましょう。異なるオフセットで2〜3の影を重ねるとリアルなライティングになります。
プライバシー
すべてブラウザ内で動作します。影のデータも設定も、何もお使いのマシンから外に出ることはありません。