ボックスシャドウ生成ツール
リアルタイムプレビュー付きのCSSボックスシャドウを階層化して作成できます。オフセット、ぼかし、広がり、色、不透明度を設定し、複数のシャドウを重ねてCSSをコピーしてください。
生成CSS
CSS
box-shadow: none;
現在のシャドウ
シャドウはまだありません。スライダーを調整して「シャドウスタックに追加」をクリックしてください。
使い方
このボックスシャドウ生成ツールでは、複数のCSSボックスシャドウレイヤーを視覚的に構築・重ね合わせ・プレビューできます。オフセットXおよびY、ぼかし、広がり、色、不透明度、インセットを設定し、各レイヤーをスタックに追加すると、カンマ区切りの単一宣言として結合されます。
- 単一シャドウの調整
オフセット、ぼかし、広がり、色、不透明度を設定し、必要に応じてインセットを切り替えてください。
- スタックに追加
同じ要素に複数のシャドウを重ねて、より深い立体感を表現してください。
- CSSをコピー
スタック内のすべてのレイヤーは、1つのbox-shadow宣言に統合されます。
box-shadowの構文
各シャドウレイヤーには最大5つの値を指定でき、色は最後に記述します。
box-shadow: offset-x offset-y blur-radius spread-radius color;
オフセットの前にinsetキーワードを追加すると、シャドウが要素の外側ではなく境界線ボックスの内側に描画されます。複数のレイヤーはカンマで区切ってください。最初に記述されたレイヤーが一番上にレンダリングされます。
ぼかしと拡散の違い
- ぼかし半径: シャドウの縁の柔らかさを指定します。値が大きいほど広がりのある光彩になり、0の場合は硬い縁になります。
- 拡散半径: ぼかしの前にシャドウの形状を拡大または縮小します。正の値はシャドウを要素より大きくし、負の値は縮小します。負の値は、柔らかく内側に引き込んだ浮遊効果を表現する際によく使われます。
シャドウの重ね合わせによる立体感
単一の大きなシャドウは平坦に見えがちです。実際のインターフェースでは通常2〜3層のシャドウが使われます。要素との接地面用に濃くて不透明度の低い小さなシャドウを近くに配置し、周囲の奥行き用にさらに外側へ大きくて柔らかく不透明度の低いシャドウを配置します。「Floating」プリセットでは、この2層構造を実演しています。
パフォーマンスの注意
box-shadowは子要素の形状ではなく、適用された要素自体のborder-radiusに従います。スクロールする要素に多数の大きなぼかしシャドウを重ねると、低スペックのスマートフォンでの再描画が遅くなる場合があります。画像やSVGへのシャドウ適用には、GPUコンポジットを利用するfilter: drop-shadow()も検討してください。
よくある質問
カスタムのオフセットとぼかしでCSSボックスシャドウを生成するにはどうすればよいですか？
スライダーを使用してオフセットX、オフセットY、ぼかし、広がりをピクセル単位で設定し、影の色と不透明度を選択してから「シャドウスタックに追加」をクリックしてください。CSSは直下に即座に更新されます。例えば、柔らかいカードの影はbox-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.25);のようになります。
box-shadowにおけるぼかしと広がりの違いは何ですか?
ぼかしは影の縁の柔らかさを調整します。値が大きいほど、影はより広がりのある柔らかな見た目になります。スプレッドはぼかす前に影を拡大または縮小します。正の値では影が要素より大きくなり、負の値では小さくなります。ぼかし30px、スプレッド-10pxの影は、硬い縁が内側に引き込まれ、自然な浮遊感を生みます。
要素を押されたように見せるインセットシャドウを作成するにはどうすればよいですか?
「シャドウスタックに追加」をクリックする前に、インセットシャドウのスイッチをオンにしてください。インセットシャドウは要素の境界ボックスの内側に描画され、窪んだ、または押されたように見えます。CSSにはinsetキーワードが含まれます: box-shadow: inset 0px 2px 8px 0px rgba(0, 0, 0, 0.30);
1つの要素に複数のbox-shadowを重ねることはできますか?
はい。各影のレイヤーを個別に追加してください。ツールはリストを保持し、出力時にカンマで結合します。重ね合わせは標準的なCSS機能です: box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 20px 40px -10px rgba(0,0,0,.3); 複数のレイヤーを重ねることで、単一の影よりも豊かな奥行きを表現できます。
box-shadowの制限事項は何ですか?
box-shadowは子要素のborder-radiusに従わず、プロパティが適用された要素自身のborder-radiusにのみ従います。また、多数のシャドウを重ねた状態でぼかし値を大きくすると、低スペックのスマートフォンでスクロールが遅くなる場合があります。画像やSVGへのシャドウ適用時は、より軽量なfilter: drop-shadow()も併せて検証してください。