CSSボックスシャドウジェネレーター

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

1. XおよびYオフセットを設定 — 水平および垂直オフセットスライダーをドラッグして、要素に対する影の位置を調整します。Xが正の値だと影は右に、負の値だと左に移動します。Yが正の値だと影は下に、負の値だと上に移動します。
2. ぼかし半径を調整 — ぼかしの値が高いほど、より柔らかく拡散した影が生成されます。ぼかしが0の場合、シャープで硬いエッジの影になります。
3. 広がり半径を制御 — 広がりは、要素の寸法を超えて影を拡大または縮小します。正の値は影を大きくし、負の値は影を小さくします。
4. 影の色と不透明度を選択 — カラーピッカーで任意の色を選択し、不透明度スライダーを使用して透明度を制御します。半透明の影（例：アルファ値の低いrgba）は、ほとんどの背景でより自然に見えます。
5. インセットシャドウを切り替える — 「Inset」オプションをチェックすると、影が要素の内側に反転し、押し込まれたような、またはエンボス加工されたような効果が作成されます。
6. プリセットを適用 — 既製のプリセットをクリックすると、瞬時にクラシックな影のスタイルが適用されます。
7. CSSコードをコピー — 「Copy」をクリックして、生成されたbox-shadow宣言をクリップボードにコピーします。

CSS box-shadowプロパティの理解

box-shadow: [inset] offset-x offset-y [blur] [spread] color;

• offset-x — 要素からの影の水平方向の距離。
• offset-y — 要素からの影の垂直方向の距離。
• blur-radius — 影のエッジの柔らかさ。ゼロはシャープを意味します。
• spread-radius — 影がどれだけ拡大または縮小するかを制御します。
• color — 有効なCSSカラー（HEX、RGB、RGBA、HSL）。RGBAは、単一の値で不透明度を制御できるため推奨されます。
• inset — オプションのキーワードで、影の方向を反転させ、要素の境界線の内側に配置します。

ボックスシャドウのプリセット — 各スタイルをいつ使用するか

アウターシャドウ vs. インセットシャドウ — 違いは何ですか？

• アウターシャドウは、要素がページ表面から浮き上がっているような錯覚を生み出します。カード、ボタン、コンテナに最適です。
• インセットシャドウは、要素がページに沈んでいる、または押し込まれているように見せます。アクティブなボタンの状態、テキスト入力フィールド、ウェルによく使用されます。

自然に見えるCSSボックスシャドウのヒント

• 完全に不透明な色ではなく、低い不透明度（0.10〜0.20）のRGBA色を使用します。
• ページ全体で影の方向を常に一致させます（通常は下向きでわずかに右、左上からの光源をシミュレートします）。
• よりリアルな奥行きのために複数の影を重ねます（柔らかく広い影 + きつく暗い影）。
• 小さな要素に過度に大きなぼかし値を使用しないようにします。不均衡に見えます。
• 色付きの影（例：青いボタンの青い光）は、ブランドに一貫した奥行きを与えるためのモダンなデザインテクニックです。

CSS Box Shadow vs. filter: drop-shadow() — 主な違い

• box-shadowは、透明度に関係なく、要素の矩形のバウンディングボックスを尊重します。
• drop-shadow() は、要素の実際の可視形状（透明なPNGを含む）に従います。
• box-shadow は inset をサポートしますが、drop-shadow() はサポートしません。
• box-shadow は複数の積み重ねられたレイヤーをサポートしますが、drop-shadow() はサポートしません。

ブラウザサポートとクロスブラウザ互換性

CSS Box Shadow の一般的な使用例

• カードUIコンポーネント — ページ背景からカードを浮き上がらせる。
• ナビゲーションバー — ヘッダーに奥行きを出すために下部に影を追加する。
• ボタン — ホバー/アクティブ状態での3Dプレス効果をシミュレートする。
• モーダルとダイアログ — オーバーレイを背景から分離する。
• フォーム入力 — アクセシビリティとUXのためのフォーカス状態のインセットグロー。
• 画像 — 写真やサムネイルを微妙な影の境界線でフレーミングする。
• ツールチップ — 微妙なドロップシャドウを持つ浮動マイクロUI要素。