CSS Box Shadow ジェネレーター
シャドウレイヤー
レイヤーは最低1つ必要です。
CSS 出力
box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.25);関連する外部ツール
一部のリンクはアフィリエイトリンクを含みます。
関連ツール
CSS の box-shadow をビジュアルで設計し、ワンクリックでコードをコピーできます。スライダーでオフセット・ぼかし・スプレッド・カラー・不透明度を調整するとライブプレビューが即座に更新されます。複数のシャドウレイヤーを重ねたり、任意のレイヤーを inset（内側）シャドウに切り替えたり、プリセットからすぐに始めることもできます。すべてブラウザで完結し、データは一切アップロードされません。
使い方
- オフセット X/Y・ぼかし・スプレッドのスライダーを動かしながらライブプレビューを確認します。
- シャドウのカラーを選択し、不透明度を調整します。
- 奥行きを出したい場合はレイヤーを追加し、inset（内側）シャドウに切り替えることもできます。
- CSS をコピーするか、Tailwind タブに切り替えてユーティリティクラス用の値を取得します。
box-shadow の各プロパティについて
CSS の box-shadow は「オフセット X, オフセット Y, ぼかし, スプレッド, カラー」の順で記述し、inset キーワードをオプションで追加できます。カンマ区切りで複数のシャドウを並べることも可能です。
オフセット X & Y
オフセット X はシャドウを水平方向、オフセット Y は垂直方向に移動させます。正の値で右・下へ、負の値で左・上へずらします。
ぼかし半径
ぼかしはシャドウの縁をやわらかくします。0 でくっきりしたシャープな影になり、値を大きくするほど拡散した柔らかい影になります。負の値は設定できません。
スプレッド半径
スプレッドはぼかしを適用する前にシャドウを拡大（正）または縮小（負）します。わずかに負の値にすると、タイトで控えめなシャドウを作るのに便利です。
inset（内側シャドウ）
inset キーワードを使うと、シャドウが要素の外側ではなく内側に描画されます。押し込んだボタンや入力フィールド、内側の立体感を出すのに最適です。
カラーと不透明度
シャドウは純粋な黒より半透明の暗い色にするのが一般的に自然に見えます。不透明度を下げることでリアルな影を表現できます。
機能
複数シャドウレイヤー
1 つの要素に複数のシャドウを重ねることができます。タイトで暗いシャドウと、広くて柔らかいシャドウを組み合わせるのが、リアルで洗練された奥行きを出す定番テクニックです。
inset シャドウ
任意のレイヤーを内側シャドウに切り替えると、押し込み・彫刻・凹み表現を作れます。ボタンやフォームフィールドに最適です。
プリセット
Material のエレベーション、ソフト・ハードシャドウ、Neumorphism、カラーグローなどのプリセットをすぐに適用して、そこから微調整できます。
ライト・ダークプレビュー
プレビュー背景をライトとダークで切り替えて、さまざまな背景色でのシャドウの見え方を確認できます。
ワンクリックコピー（CSS または Tailwind）
すぐに貼り付けられる box-shadow 宣言をコピーするか、Tailwind の任意値 shadow-[…] の形式で取得できます。
主な使用例
カードとコンテナ
カードに低不透明度の柔らかいシャドウを加えると、コンテンツがまとまって浮き上がって見えます。
ボタンとホバー状態
ボタンに控えめなシャドウを追加し、ホバー時に大きくしたり、inset シャドウで押し込んだ感触を演出したりします。
Neumorphism
要素の両側に明るいシャドウと暗いシャドウを組み合わせることで、ソフトで浮き彫りになった Neumorphism のルックを実現できます。
グローとフォーカスリング
オフセット 0 のカラーシャドウにスプレッドを与えると、グロー効果やアクセシブルなフォーカスハイライトを作れます。
注意事項とヒント
- 大きくぼかしたシャドウを多用するとレンダリングパフォーマンスに影響します。アニメーションやスクロール要素では控えめに使いましょう。
- ぼかし値を非常に大きくすると描画コストが高くなります。リアルな表現には小さいシャドウを重ねる方が効果的です。
- シャドウが読みやすさを損なわないよう、十分なコントラストを確保してください。
- inset シャドウは要素の内側に描画されるため、ボーダーボックスの外へははみ出しません。
よくある質問
- box-shadow と filter: drop-shadow の違いは何ですか？
- box-shadow は要素の矩形ボーダーボックス（border-radius を考慮）に沿って描画されます。一方 drop-shadow は透過 PNG や不規則な形も含め、実際のシェイプに沿います。このツールは box-shadow を生成します。
- 1 つの要素に複数のシャドウを重ねられますか？
- はい。CSS ではカンマ区切りで複数のシャドウを指定でき、このジェネレーターでも複数レイヤーを積み重ねられます。シャドウを組み合わせることがリアルな奥行きを出す鍵です。
- inset シャドウとは何ですか？
- inset シャドウは要素の外側ではなく内側に描画されるシャドウです。押し込んだボタン、入力フィールド、凹んだ表面に最適です。任意のレイヤーの inset オプションをオンにしてください。
- box-shadow はページの速度に影響しますか？
- 静的なシャドウを少数使うだけなら問題ありません。大きくぼかしたシャドウは描画コストが高いため、アニメーションや頻繁に再描画される要素では注意が必要です。
- データはアップロードされますか？
- いいえ。ジェネレーターは完全にブラウザ内で動作します。サーバーへの送信はなく、アカウント登録も不要です。