DevTulz Online

CSS Box Shadow ジェネレーター

背景

CSS Box Shadow とは？

CSS の box-shadow プロパティは、要素のフレーム周囲にシャドウ効果を追加します。シャドウはオフセット、ぼかし、広がり、色付け、inset（内側シャドウ）として設定できます。カンマ区切りの複数シャドウを重ねることで、豊かな表現が可能です。このジェネレーターでは、複雑な多層シャドウをビジュアルで構築し、貼り付け可能なCSSをクリップボードにコピーできます。

Box Shadow ジェネレーターの使い方

  1. Offset X/Y・Blur・Spread のスライダーを調整して、シャドウの位置と形を整えます。

  2. カラーサンプルをクリックしてシャドウの色を選び、Opacity スライダーで透明度を設定します。

  3. 「内側」をオンにすると、内側グロー効果や押し込まれた効果が作れます。

  4. 「+ レイヤーを追加」をクリックして、複数のシャドウを重ねます。

  5. 生成されたCSSをコピーして、スタイルシートに貼り付けます。

よくある質問

box-shadowとdrop-shadowフィルターの違いは何ですか？ box-shadowは要素の矩形ボーダーボックスの周りに影を追加し、インセット影をサポートします。CSSフィルター: drop-shadow()は要素の視覚的形状（透明度を含む）に適用され、透明背景のPNGのような非矩形アウトラインに従わせます。

Material Designのカード昇高効果を作成するにはどうすればよいですか？ 2つのボックス影をスタックします：ソフトアンビエント影（大きなぼかし、低不透明度、わずかなスプレッド）とキー影（小さなぼかし、高不透明度、方向オフセット）。たとえば、0 2px 4px rgba(0,0,0,0.12), 0 4px 16px rgba(0,0,0,0.08)。

box-shadowはページレイアウトに影響しますか？ いいえ。box-shadowは文書フロー内の要素のサイズまたは位置に影響しません。アウトラインとは異なり、レイアウトスペースを占有せず、他の要素を押し回しません。

box-shadowをアニメーション化できますか？ はい。box-shadowはCSSトランジションとアニメーションでアニメーション化可能です。パフォーマンスについては、必要な場合のみbox-shadowのトランジションを優先します—ブラウザはtransformやopacityと同じ効率でbox-shadowの変更をGPUアクセラレーションできません。

Keywords: CSS box shadow ジェネレーター, box-shadow CSS, CSS シャドウツール, CSS ドロップシャドウ, 内側シャドウ, 多層シャドウ, CSS shadow オンライン