なぜ単一のbox-shadowより多層（レイヤード）シャドウが優れているのですか？

現実の光は単一の光源だけでなく、環境光によって拡散してグラデーションを描きます。CSSで1つの影（例: 0 10px 20px rgba(0,0,0,0.2)）を指定するとフチが不自然に濃くなり人工感が出ます。2〜6層の微細な影を薄く重ね合わせることで、StripeやAppleのWebサイトのように極めて滑らかで上質な立体感が表現できます。

エレベーション（Elevation）とは何ですか？

マテリアルデザインなどで使われるUIの「Z軸の高さ（浮き上がり）」の概念です。Elevation 1（カードやボタン）からElevation 5（最前面のモーダルやトースト通知）まで、高さに応じて影の広がりとボケ足を段階的に統一することで、整然としたデザインシステムが構築できます。

Tailwind CSSで生成した多層シャドウを使用する方法は？

Tailwind CSSでは、任意の値構文（Arbitrary values）としてクラスに直接 `shadow-[0_1px_3px_...,0_10px_20px_...]` と記述するか、`tailwind.config.js` の `theme.extend.boxShadow` に登録して `shadow-elevation-1` のように呼び出して利用できます。

プロ仕様 CSS 多層スムーズシャドウ＆エレベーション設計ジェネレーター

❓ CSS シャドウ設計に関するよくある質問

Q. なぜ多層シャドウは自然に見えるのですか？

自然界の光は「オブジェクト直下に落ちる濃く鋭い影（アンビエントオクルージョン）」と、「遠くまで広がる薄く柔らかい拡散光」の複数の性質を持ちます。本ジェネレーターは、近距離用の小さな影と遠距離用の大きな影を数理的にブレンドすることで、物理学に基づいた極めて自然な奥行きを再現します。

Q. パフォーマンス（描画負荷）への影響はありますか？

多層シャドウは単一の影に比べてブラウザのGPUラスタライズ負荷がわずかに増えますが、近年のスマートフォンやPCブラウザでは4〜5層程度であればパフォーマンス低下なく極めて滑らかに60fpsで動作します。ただし何百個もの要素が並ぶリストでは、静止時は低レイヤー（1〜2層）、ホバー時のみ多層化するなどの最適化が推奨されます。

Q. ダークモードでのシャドウ設計のコツは？

背景が暗いダークモードでは、黒い影（rgba(0,0,0,x)）を落としても背景と同化して見えなくなります。ダークモードでは「影を落とす」のではなく、カードの背景色を少し明るくする（サーフェスエレベーション）か、微細な外枠線（border: 1px solid rgba(255,255,255,0.1)）と薄いグロー（淡い発光）を組み合わせるのがモダンUIの定石です。