CSSシャドウジェネレーター
CSSシャドウを生成
CSSシャドウジェネレーター の使い方
CSSシャドウを生成 無料オンラインツール、登録不要、広告なし。今すぐ無料でお使いいただけます。
CSSシャドウの使用場面
シャドウはインターフェースに深み、高さ、視覚的な階層を加えます。GoogleのMaterial Design、AppleのHuman Interface Guidelines、ほとんどの現代デザインシステムはシャドウを体系的に使ってどの要素がユーザーに近いかを伝え、フラットなインターフェースに3次元の深みの感覚を生み出します。
- カードの高さ表現：カードコンポーネントへの微妙なシャドウは背景から浮かせ、インタラクティブまたは自立したコンテンツ単位であることを示します。深いシャドウはより大きな高さを示します。GoogleのMaterial DesignのFloating Action Button（FAB）がその典型例です。
- モーダルとドロップダウンのシャドウ：オーバーレイ（モーダル、ドロップダウンメニュー、ツールチップ）はページコンテンツの上に浮いていることを示すために強いシャドウを使います。明確な視覚的深度階層を作ります。
- フォーカスインジケーター：box-shadowはフォーカス状態のアウトラインを置き換えることができます：
box-shadow: 0 0 0 3px rgba(0,112,243,0.4)はレイアウトに影響せず視覚的なフォーカスリングを作ります。JIS X 8341準拠のアクセシブルなデザインシステムでよく使われます。 - テキストの読みやすさ：画像の上の白いテキストへの微妙なtext-shadowは背景画像の内容に関わらず読みやすさを保証します。画像を覆う単色のカラーオーバーレイなしに実現できます。
- ニューモーフィズム：ニューモーフィックデザインスタイルは2つのシャドウ（一方の側に明るいシャドウ、もう一方に暗いシャドウ）を使って背景から押し出されたまたは埋め込まれた3D効果を作ります。
box-shadowの構文：box-shadow: [inset] offset-x offset-y ぼかし-半径 広がり 色。複数のシャドウを重ねられます：box-shadow: 0 2px 4px rgba(0,0,0,.1), 0 8px 16px rgba(0,0,0,.05)はGoogleのMaterial Designの多層自然シャドウで使われる技術です。
Frequently Asked Questions
box-shadowとdrop-shadow()の違いは何ですか？
box-shadowは要素の矩形ボックスに適用されます。透明な背景を持つPNG画像などの不規則な形には追従しません。CSSフィルター関数のdrop-shadow()は透明領域を含む実際にレンダリングされた形に追従します。アイコンや透明度を持つ画像にはdrop-shadow()を使い、カードやボタンなどの矩形要素にはbox-shadowを使います。
insetキーワードは何をしますか？
insetキーワードはシャドウが外側ではなく要素の内側から現れるようにします。インセットシャドウは押し込まれたまたは沈んだ要素の外観を作ります。押された状態のボタン、入力フィールド（内側の深みの効果）、またはニューモーフィックな埋め込みUI要素に役立ちます。
box-shadowの広がり半径とは何ですか？
box-shadowの4番目の値が広がり半径です。シャドウを拡大または縮小します。正の値はシャドウを要素より大きくし、負の値は小さくします。offset-xとoffset-yを0に設定し正の広がりを設定すると要素の周りに均一なアウトライン/グロー効果ができます。
なぜSafariとChromeでシャドウの見え方が違うのですか？
ブラウザ間のシャドウレンダリングの違いは通常サブピクセルレンダリングとガンマ補正によるものです。SafariとChromeはわずかに異なるコンポジションアルゴリズムを使います。ブラウザ間で一貫した結果のために、opacityではなく明示的なアルファ値を持つRGBA色を使い、両方のレンダリングエンジンでシャドウをテストしてください。
box-shadowはいくつまで重ねられますか？
厳密な制限はありません。コンマ区切りリストで複数のbox-shadowを重ねられます。異なるぼかし半径と不透明度を持つ複数の重なったシャドウはより自然に見えるシャドウを作り、実世界の照明を模倣します。GoogleのMaterial Designは各高さレベルに特定の多層シャドウレシピを定義しています。
CSS box-shadow vs outline vs border vs filter: drop-shadow()
box-shadowはボックスの外側（またはinsetで内側）にシャドウを追加します。レイアウトに影響しません。outlineはボーダーの外側に線を描きます。アクセシブルなフォーカスインジケーターによく使われます。borderは要素内に線を追加し、レイアウトに影響します。filter: drop-shadow()は透明度を含む要素の実際にレンダリングされた形に追従します。UIの高さと深みにはbox-shadowを使い、フォーカスリングにはoutlineまたはbox-shadowを使い、アイコンのシャドウにはdrop-shadow()を使います。