多重レイヤーのCSSボックスシャドウと自然で滑らかな陰影（エレベーション）を生成。オフセット・ぼかし（Blur）・拡散（Spread）・内側シャドウ（Inset）を調整し、最適化されたCSSコードやTailwindトークンを即座に出力します。
最新の多層シャドウアルゴリズムにより、自然で美しいUIエレベーションを実現します。
マルチレイヤーCSSボックスシャドウと現実世界の光学特性を模倣した滑らかな立体エレベーション（標高）を生成。オフセット、ぼかし半径、スプレッド、内側グロー（inset）を視覚的に調整し、最適化されたCSSコードやTailwind CSSシャドウトークンを即座にエクスポートできます。
要素のボーダーボックスを基準とした、影のデカルト座標系における水平方向の変位を指定します。正の値を設定すると影は右側に、負の値を設定すると左側に投影されます。マルチレイヤー照明モデルにおいては、入射光源の角度をθと置いた極座標変換（dx = distance × cos(θ)）によって算出されます。
影のデカルト座標系における垂直方向の変位を指定します。正の値を設定すると影は下方へ落ち（自然界の太陽光や室内照明などの頭上光源を再現）、負の値を設定すると上方へ投影されます。標準的な物理エレベーションモデルでは、認知されるZ軸の浮遊度（Elevation）に比例してoffset-yがスケーリングされます。
影の外周部輪郭に適用されるガウスぼかし（Gaussian Blur）フィルターカーネルの標準偏差（σ = blur / 2）を定義します。ぼかし半径に0を指定するとカミソリのようにシャープな硬いシルエットとなり、0より大きい値を指定すると滑らかに拡散する半影（Penumbra）グラデーションが生成されます。なお、64pxを超える過度な値は低スペックなモバイル端末においてGPUラスタライズのボトルネックを引き起こす要因となります。
ガウスぼかしのラスタライズ処理を実行する前に、影のジオメトリを上下左右の4方向へ拡大または縮小します。正の値を設定すると影の外周が外側へ膨張し、負の値を設定すると内側へ収縮します。負のスプレッドは、マルチレイヤーシャドウにおいて左右への余計な滲み（ブリード）を抑えつつ、直下方向の強い接地感を維持するための極めて重要な実践技法です。
投影される影の分光色および不透明度を指定します。完全な純黒（rgba(0, 0, 0, alpha)）は無調整の光吸収を意味し、有彩色背景上ではくすんだ濁ったグレーの縁取りを生じさせます。洗練されたデザイントークンでは、背景色に合わせた微調整色調（寒色系サーフェスには深みのあるネイビー、暖色系サーフェスにはダークアンバーなど）を採用し、アルファ値を4%〜25%の範囲でキャリブレーションして適用します。
指定すると投影ベクトルを反転させ、要素の外側ではなくボーダーボックスの内側に影を描画します。内側シャドウ（inset）は、刻印や窪み、凹面インデント、内側ベベルのハイライト、物理ボタンの押し込み状態などをシミュレートし、要素のborder-radiusによる曲率境界で正確にクリッピングされます。
多層（マルチレイヤー）スタックにおいて、連続する各層の変位距離、ガウスぼかし半径、アルファ不透明度がどのようにスケールするかを制御する多項式または指数関数的な冪乗則指数（一般に k = 1.8 〜 2.4）。不自然な線形（リニア）変化を防ぎ、現実世界の光学における逆二乗の法則に基づく光の減衰を忠実にエミュレートします。
大きな垂直オフセットを持つ影（例：offset-y: 20px、blur: 25px）を適用すると、ガウスぼかしが左右の水平方向にも自動的に拡散し、まるで膨らんだクッションのような野暮ったい印象を与えてしまいます。垂直オフセットの約20%〜40%に相当する負のスプレッド半径（例：spread: -6px）を指定することで、左右両サイドの余分な影を内側に引き締めつつ、下方向へのしっかりとした接地感を両立させ、シャープで洗練された垂直方向のエレベーションを実現できます。
CSSのbox-shadowプロパティを直接transitionやanimationで変化させると、ブラウザのレンダリングエンジンはアニメーションのフレームごとにCPUおよびGPUで重い多段ガウスぼかしカーネルの再ラスタライズ（Paint処理）を余儀なくされ、ホバー時に激しい画面の引っかかり（ジャンク）やフレーム落ちを引き起こします。これを防ぐには、浮遊時のシャドウをあらかじめ::after擬似要素に定義してopacity: 0およびwill-change: opacityを指定しておき、ホバー時にはopacity: 1への切り替えとハードウェアアクセラレーションが効くtransform: translateY(-2px)のみを遷移させることで、GPUコンポジタースレッドによるシルクのように滑らかな60fps/120fpsの描画パフォーマンスを維持できます。
暖かみのあるアンバー、エメラルドグリーン、ディープサファイアなどの有彩色サーフェス上に無彩色の黒い影（rgba(0, 0, 0, 0.15)）を重ねると、sRGBガンマブレンディングの特性上、ぼかしの外周部分に彩度が失われた汚れたようなグレーのハロー（濁り）が発生します。透明感のある上質な陰影表現を作るには、背景色から色相を10°〜20°補色寄りの寒色へシフトさせ、彩度を15%引き上げ、輝度を8%〜15%まで落としたチント（色付き）カラーを影に採用してください。
親要素や祖先コンテナにoverflow: hiddenまたはoverflow: autoが宣言されている場合、コンテナの境界ボックスの外側に広がるbox-shadowは即座にクリッピングされます。これを解決するには、親コンテナに十分なパディング（最低でもblur + offset-y以上）を設けるか、不要なoverflow: hiddenを解除するか、あるいはスクロールコンテナの外側に独立して配置したラッパーdiv要素にシャドウを適用してください。
ぼかし半径が60pxを超える複雑なシャドウを6層以上重ねると、特に高DPI（Retina）ディスプレイ環境でGPUのタイルキャッシュメモリを大量に消費します。レイヤー数を綿密に計算された3〜4層の調和レイヤーに絞り込み、最大ぼかし半径を40px程度に抑え、さらにcontain: paintまたはwill-change: transformを付与してカード要素を独立したハードウェア合成レイヤー（Compositing Layer）へ昇格させることで負荷を大幅に軽減できます。
WebKitエンジンには、外側のborder-radiusと内側のinset box-shadowを同時に描画する際にサブピクセルのアンチエイリアス処理に起因するジャギーが生じる既知のレンダリング挙動が存在します。これを解消するには、-webkit-mask-image: -webkit-radial-gradient(white, black);を明示的に指定するか、transform: translateZ(0);を追加してGPUコンポジットを強制し、さらにborder-radiusの値に小数のrem単位ではなく整数のpx単位を使用してください。
CSSのbox-shadowプロパティは、要素の矩形ボーダーボックスおよびborder-radiusの曲率のみを投影基準として計算するため、内部の透過ピクセルは完全に無視されます。透過PNGの切り抜き輪郭や複雑なSVGベクターパスの形状に沿って影を落としたい場合は、box-shadowの代わりにCSSのfilter: drop-shadow(x y blur color)を使用してください。ただし、filter: drop-shadowではスプレッド半径（spread）および内側シャドウ（inset）引数はサポートされていない点に留意してください。
単一レイヤーのCSS box-shadowは均一で線形なガウスぼかしに依存しているため、現実世界の光学現象を再現できません。物理空間において光を浴びた物体は、接地面直下に落ちる濃くシャープな本影（接触シャドウ／アンビエントオクルージョン）と、外側へ向かって淡く広がるソフトな半影（ペナンブラ）という2つの異なる陰影領域を形成します。指数関数的な距離・ぼかしの減衰関数（例：y_i = d × (i/n)^2.2、blur_i = b × (i/n)^2.0、alpha_i = alpha_max × e^(-0.6i)）を用いて3〜6層のbox-shadowを重ね合わせることで、接地面のアンビエントオクルージョンと空間的な光の拡散減衰の双方が忠実に再現されます。
CSSのbox-shadowは要素の矩形ボーダーボックス（border-radiusを含む）に対して厳格に適用され、要素内部の透過部分や子要素の形状は考慮されません。一方、filter: drop-shadow()はレンダリングされたピクセルのアルファチャンネルマスクを評価するため、背景が透過されたPNG画像の輪郭、インラインSVGのパス、CSSのclip-pathで切り抜かれた特殊な形状に沿って影を投影できます。ただし、filter: drop-shadow()はスプレッド半径（spread-radius）および内側シャドウ（inset）キーワードをサポートしておらず、多層に重ねた際のGPUコンポジット負荷もbox-shadowより高くなります。
無彩色の純粋な黒（例：rgba(0, 0, 0, 0.15)）を有彩色サーフェス上に重ねると、sRGB空間におけるアルファブレンディングによって背景の彩度が奪われ、境界部分がくすんだ濁ったグレーに変色します。リッチで深みのある陰影を表現するには、背景色の色相をサンプリングし、10°〜20°ほど深みのある補色方向（例：オレンジ背景なら深みのある赤褐色アンバー、ブルー背景ならミッドナイトネイビー）へシフトさせ、彩度を15%〜30%高め、輝度を10%〜20%まで落とした影色を指定します。最新のモダンCSSでは、color-mix(in oklch, var(--bg-color), black 80%)を用いることでこの色調計算を自動化することも可能です。
box-shadowプロパティ自体を直接アニメーションさせてはいけません。フレームごとにブラウザが重厚なガウスぼかし行列の再ラスタライズ（PaintおよびComposite処理）を反復実行するため、深刻な描画遅延が発生します。最適なアプローチは、あらかじめエレベーション適用後のbox-shadowを持たせた::after擬似要素を作成し、初期状態をopacity: 0にしておきます。そして:hoverや:focus時に擬似要素のopacityとtransform: translateY(-2px)のみをアニメーションさせます。opacityとtransformの変形処理はレイアウト（Reflow）や再描画（Paint）を発生させず、完全にGPUコンポジタースレッド単独で完結するため、フレーム落ちのない極めて滑らかな60fps/120fpsの動作を実現できます。
主要なデザインシステム（Material Design、Tailwind CSS、Apple HIGなど）では、一般に5〜6段階のZ軸エレベーションスケールが構築されています：Elevation 1（カード・ボタン通常時：Yオフセット 1〜2px、ぼかし 3〜4px、不透明度 5〜8%の微細な境界分離）、Elevation 2（カードホバー・浮き上がりボタン：Yオフセット 4〜6px、ぼかし 8〜12px、不透明度 10〜12%）、Elevation 3（ドロップダウンメニュー・ポップオーバー：Yオフセット 8〜12px、ぼかし 16〜24px、不透明度 12〜15%）、Elevation 4（モーダルダイアログ・ドロワー：Yオフセット 16〜24px、ぼかし 32〜48px、不透明度 15〜20%）、Elevation 5（トースト通知・最前面アラート：Yオフセット 24〜32px、ぼかし 48〜64px、不透明度 20〜25%に外周グローを付与）。
いいえ、box-shadowはドキュメントのレイアウトに一切影響を与えません。要素のバウンディングボックス寸法を拡大させることはなく、適用時や切り替え時にもDOMのリフロー（再配置計算）をトリガーしません。ただし、ボックスシャドウは要素のボックスモデルの外側に描画されるため、過大なぼかし半径やスプレッド半径を設定すると隣接要素の上に重なってテキストを隠してしまったり、ビューポートの幅を超えて意図しない横スクロールバーを発生させたりするリスクがある点には注意が必要です（親コンテナのoverflow: hidden等で適切に抑制されていない場合）。
直感的なドラッグ操作でカスタムCSS clip-pathポリゴン形状を生成。クロスブラウザ対応のCSSルール、SVGパスコード、レスポンシブな%座標を即座に出力・コピーできます。
画像から主要なカラーパレットを瞬時に抽出。HEX・RGB・HSLスウォッチの生成、CSSやTailwindトークンの書き出し、WCAGアクセシビリティのコントラスト比検証までブラウザ上で完結します。
黄金比の寸法と黄金長方形の比率を瞬時に計算。φ（1.618）による調和分割、タイポグラフィのスケール設定、レスポンシブなレイアウトグリッドを生成します。
ニューモーフィズム（Soft UI）の凸面・凹面・インセット陰影を直感デザイン。光の照射角・ぼかし・コントラストをリアルタイムに微調整し、最適化されたCSS・Tailwind・SCSSコードを即座にコピーできます。
補色、類似色、三色配色、分裂補色などの調和パレットを瞬時に生成。リアルタイムなWCAGコントラスト比検証とCSS/Tailwindエクスポートに対応したブラウザ完結型配色ツール。
backdrop-filterのぼかし、透明度、ボーダー、陰影をリアルタイムに調整し、モダンなCSSグラスモーフィズムやすりガラスUIコードを即座に生成・コピーできます。