# インタラクティブ CSS Box Shadow ジェネレーター：技術アーキテクチャと実践的完全ガイド

現代のWebフロントエンド設計において、視覚的な深み（Visual Depth）と空間的なレイヤリング（Spatial Layering）は、情報アーキテクチャとUIコンポーネントの優先順位をユーザーへ直感的に伝えるための必須要素です。Google Material 3、Apple Human Interface Guidelines（HIG）、Tailwind UI などの先進的なデザインシステムは、物理的な光の照射モデルに基づいて厳密に計算された「エレベーション（Elevation：標高・階層）」トークンを採用し、コンポーネントの重なり、操作状態（ホバー、アクティブ、フォーカス）、サーフェス境界を表現しています。

W3C標準規格である CSS Backgrounds and Borders Module Level 3 で定義された CSS box-shadow プロパティは、2Dディスプレイ上で立体的な陰影をシミュレートするための最も基本的かつ強力なプリミティブです。しかし、テキストエディタ内で手動コーディングしながら美しい影を作り上げる作業は極めて困難です。デカルト座標系のオフセット（$X, Y$）、ガウスぼかし半径（Blur Radius）、負のスプレッド収縮（Negative Spread Choke）、アルファチャンネルの不透明度、そして内側のハイライト（Inset）の相互作用を調整するには、ブラウザのDevToolsを行き来する膨大な試行錯誤を要します。

ToolsAA インタラクティブ CSS Box Shadow ジェネレーター（Visual Shadow Maker） は、直感的な2D仮想光源コントローラー、調和のとれた複数レイヤースタッキング機能、リアルタイムなコントラスト検証プレビュー、そして Vanilla CSS や Tailwind CSS 任意値クラス（Arbitrary Values） へのワンクリックコピー機能を備えた、プロフェッショナルエンジニアのための次世代スタイリングツールです。

本ツールは完全なクライアントサイド実行モデル（"use client"）を採用しています。すべての幾何座標計算、色空間変換、コード合成処理はお使いのブラウザ内メモリでのみ完結します。入力データやデザイン設定が外部サーバーへ送信されることは一切なく、機密性の高いデザインシステムや企業ブランドトークンの安全性が100%保証されます。

# 包括的概要と実践的なユースケース

CSSの box-shadow プロパティは、要素の境界ボックス（border-box）を光源を遮る閉塞ジオメトリ（Occluding Geometry）としてモデル化し、下層の背景面へ本影（Umbra）や半影（Penumbra）を投影します。

[ 仮想光源コントローラー ] -> [ 極座標からデカルト座標への写像 (dx, dy) ]
                                   |
                                   v
+-------------------------------------------------------------+
|        ToolsAA ブラウザ内シャドウ合成エンジン (Shadow Engine)  |
|  - 100% クライアントサイド処理（外部サーバーへの通信ゼロ）    |
|  - 調和的分散計算：ガウスぼかし近似 & ネガティブスプレッド   |
|  - マルチ構文ジェネレーター：CSS、Tailwind、React、Tokens    |
+-------------------------------------------------------------+
                                   |
         +-------------------------+-------------------------+
         v                                                   v
[ 標準 CSS 宣言 (Vanilla CSS) ]             [ Tailwind 任意値ユーティリティ ]
box-shadow: 0 4px 6px -1px...               shadow-[0_4px_6px_-1px_...]

# フロントエンド開発現場での代表的ユースケース

• デザインシステムのElevationトークン標準化: elevation-0 から elevation-5、またはTailwind CSSの shadow-sm から shadow-2xl に至る階層スケールを体系化し、ボタン、カード、ドロップダウンメニュー、モーダルダイアログ間で統一された空間深度を維持します。
• モーダルダイアログとポップオーバーのオクルージョン: 画面全体を覆う暗色オーバーレイ（Backdrop）上で、背後の要素とモーダルサーフェスを視覚的に明確に切り離すために、広範囲に拡散するアンビエントシャドウ（環境光の影）を付与して視覚的集中を高めます。
• 物理的な触覚マイクロインタラクション: マウスホバー時に要素をふわりと浮き上がらせ（外側の影を拡大）、クリック（:active）時に押し込まれる感覚を再現するためにインセットシャドウ（inset）へ切り替えることで、物理的なスイッチのような心地よい操作感を実現します。
• ニューモーフィズム（Neumorphism）の立体造形: 単色背景から要素を浮き彫りに見せる手法です。左上からの光による白いハイライト（負のオフセット）と、右下へ落ちる暗いシャドウ（正のオフセット）を対向配置し、滑らかなエンボス加工のようなサーフェスを構築します。
• グラスモーフィズム（Glassmorphism）のリムライティング: 半透明のすりガラス風背景（backdrop-filter: blur(...)）に対して、外側の柔らかなドロップシャドウに加え、上端に極薄の1px半透明ホワイトインセットシャドウ（inset 0 1px 1px 0 rgba(255, 255, 255, 0.2)）を組み合わせることで、ガラスの斜断面で光が屈折するリアルな質感を表現します。

# 100% クライアントサイド処理がプライバシー保護に不可欠な理由

• デザイン知的財産（IP）の保護: リリース前の新規プロダクト、自社ブランドのカラーパレット、独自のデザイントークン定義は、企業にとって重要な機密情報です。クラウドを介さずブラウザ内で完結することで、第三者インフラへの漏洩リスクを根本から排除します。
• テレメトリ・外部ログ収集の完全排除: 社内専用システムや管理画面のUIプロトタイピングにおいて、スタイル設定やパラメータがアクセスログや追跡トラッカーに記録される懸念がありません。
• 完全なデータ主権とオフライン動作: ToolsAAはネイティブWeb APIのみで動作するため、インターネット接続が遮断されたオフライン環境やセキュリティポリシーの厳しい閉域網（Air-Gapped Network）でも即座に利用可能です。

# 技術アーキテクチャと内部動作原理

美しいCSSシャドウを自在に操るためには、ブラウザのレンダリングエンジン（ChromiumのBlink/Skia、AppleのWebKit、MozillaのGecko/WebRender）が実行する幾何計算、ラスター化パイプライン、数学的モデルを深く理解する必要があります。

# 1. W3C Box Shadow仕様と幾何パラメータ

W3C CSS Backgrounds and Borders Module Level 3（Section 7.1）で規定された正式な構文定義は以下の通りです。

box-shadow: none | [ inset? && [ <length>{2,4} ] && <color>? ]#

• 水平オフセット ($X$): X軸方向の符号付き移動量。正の値で右方向、負の値で左方向へ影を投影します。
• 垂直オフセット ($Y$): Y軸方向の符号付き移動量。正の値で下方向、負の値で上方向へ影を投影します。
• ぼかし半径 ($r$ / Blur Radius): 影の輪郭をぼかす非負の長さ。0px を指定すると輪郭はカミソリのようにシャープになり、値が大きくなるほど光が拡散します。
• スプレッド距離 ($s$ / Spread Distance): 影のサイズを全方位へ拡大（$s > 0$）または縮小（$s < 0$）させる符号付き長さ。
• inset キーワード: 省略時は要素の外部に影を投影（外側シャドウ）しますが、指定時は要素のボーダーの内側に影を投影（内側シャドウ）します。
• カラー値 (<color>): 影の色（HEX、RGB、RGBA、HSL等）。省略時の挙動はブラウザによって color プロパティ値が採用されますが、クロスブラウザの安定性を保つため明示的な rgba() の指定が強く推奨されます。

# 2. ブラウザレンダリングエンジンにおけるガウスぼかし近似

物理的な光の散乱は2次元ガウス分布（Gaussian Distribution）に従います。

$$G(x, y) = \frac{1}{2\pi\sigma^{2} e}{-\frac{x^2+y2}{2\sigma^2}}$$

しかし、ディスプレイ全体に対して連続的なガウス畳み込み（Gaussian Convolution）をリアルタイムに計算することは、60 FPS（16.6ms）の描画フレームレートを維持する上で計算負荷が高すぎます。そのため、SkiaやWebRenderなどの現代のレンダリングエンジンは、3パスクアドラティックボックスフィルタ（Three-pass Box Filter） を用いてガウスぼかしを近似しています。

中心極限定理（Central Limit Theorem）により、均一なボックスブラー（単純平均化フィルタ）を3回連続して適用することで、真のガウス分布と98%以上一致する滑らかな曲線が得られます。このアルゴリズムは $O(1)$ の定数時間で実行され、ぼかし半径 $r$ と標準偏差 $\sigma$ の関係式は以下のように近似されます。

$$\sigma \approx r \times 0.5$$

# 3. スプレッド距離と border-radius の角丸幾何学

要素に border-radius が設定されている場合、外側の影の角丸半径はスプレッド距離 $s$ に応じて動的に変化します。

• 正のスプレッド ($s > 0$): 影の境界が外側に広がるため、角の曲率半径も比例して拡大します。

$$R{\text{shadow}} = R{\text{border}} + s$$

• 負のスプレッド ($s < 0$): 影の境界が内側に引き締められるため、角の曲率半径は減少します。

$$R{\text{shadow}} = \max(0, R{\text{border}} + s)$$

• 角丸の崩壊（エッジケース）: 負のスプレッドの絶対値がボーダー半径以上になった場合（$|s| \ge R{\text{border}}$）、曲率半径の計算結果は $0\text{px}$ となり、角の丸みが完全に消失して鋭利な直角（90度）になります。角丸ボタンやカードで負のスプレッドを使用する際は、必ず $|s| < R{\text{border}}$ を維持する必要があります。

# 4. ボックスシャドウのクリッピングモデルとインセット幾何

W3Cの仕様において、外側シャドウ（Drop Shadow）は要素の境界ボックス（border-box）直下の領域が明示的にクリッピング（くり抜き除外）されます。

+------------------------------------+
|  要素本体 (border-box 内部)        |
|  [ 背景が透過であっても影は描画されない ]  |
+------------------------------------+
  \                                 /
   \===> 影は要素の外周にのみ描画される <===

要素の background-color が transparent（透明）であっても、背後にシャドウが透けて見えることはありません。一方、inset シャドウを指定した場合はクリッピング領域が反転します。境界ボックスの外側がすべてクリップされ、内側のパディング領域に向かって影が投影されます。

# 5. マルチレイヤースタッキングと Philip Walton によるアンビエント分散手法

現実世界の光源（太陽光や室内照明）から生じる影は、単一のベタ塗りグラデーションではありません。物理的には以下の2つの要素から構成されます。

1. 本影（Umbra / 接触影）: 物体と接地直下の極めて暗く輪郭がはっきりしたシャドウ。
2. 半影（Penumbra / 環境光影）: 光の回折と環境光の反射によって広範囲に淡く広がるソフトなグラデーション。

CSSで単一のレイヤー（例: box-shadow: 0 10px 20px rgba(0,0,0,0.4)）を指定すると、中心部が濁った不自然な黒い塊になりがちです。エンジニアのPhilip Waltonが提唱した「Smooth Shadows」技法では、不透明度を低く抑えた（3%〜8%）複数のレイヤーを幾何級数的な間隔（$Y = 2^{k$、$\text{blur} = 2}{k+1}$）で重ね合わせることで、驚くほど滑らかで物理的に正しい陰影を表現します。

# 6. ブラウザWeb API、Canvas数学、GPU合成スレッド最適化

• HTML5 Canvas & 2D極座標写像: ToolsAAの2D光源コントローラーは、ドラッグ座標の角度 $\theta$ と距離 $d$ からデカルト座標のオフセットを三角関数でリアルタイム変換します（$X = d \cos\theta, Y = d \sin\theta$）。
• Web Crypto API: レイヤー追加時にキーの衝突を防ぐため、サードパーティライブラリに依存せず crypto.randomUUID() でRFC 4122準拠のUUIDを生成します。
• React 18 Concurrent Scheduling: スライダーの高速ドラッグ時にメインスレッドのUIブロッキングを防ぐため、useDeferredValue を活用してプレビュー描画とコード生成の優先度を最適化しています。
• GPUコンポジット最適化: box-shadow を変更するとブラウザの「Paint（再描画）」フェーズが強制発生します。60 FPSのホバーアニメーションを実現するには、疑似要素 ::after にあらかじめ影を設定して opacity のみをGPU合成スレッドでアニメーションさせる設計が不可欠です。

# ステップバイステップ実践チュートリアル

ToolsAAのジェネレーターを使用して、実用的な高品位シャドウを短時間で作成する手順を解説します。

# ステップ 1: 背景モードと要素ジオメトリの設定

プレビュー領域上部の背景モード切り替え（Dark, Slate, Light, White, Checkered Alpha（市松模様））から、実装対象のUIテーマに最適な背景を選択します。要素のスライダーで幅・高さ・border-radius（角丸）を対象コンポーネントと同じ値に設定します。

# ステップ 2: 仮想光源コントローラーによるオフセット調整

中央の円形ラジアルコントローラー内の青い光ポインタをドラッグします。直感的なドラッグ操作に合わせて、水平オフセット（$X$）と垂直オフセット（$Y$）がリアルタイムに計算されます。細かいピクセル調整が必要な場合は、右側パネルのスライダーや数値入力フィールドから1px単位で微調整できます。

# ステップ 3: レイヤースタッキングによるElevation構築

「レイヤーを追加（Add Layer）」 ボタンをクリックして複数のシャドウ層を重ねます。

1. 最上位レイヤー: $Y = 1\text{px} \sim 2\text{px}$、$\text{blur} = 2\text{px} \sim 3\text{px}$、不透明度 10%（接触部分を際立たせるUmbra）
2. 中間レイヤー: $Y = 4\text{px} \sim 8\text{px}$、$\text{blur} = 8\text{px} \sim 16\text{px}$、不透明度 6%（立体感を出す中間層）
3. 最下位レイヤー: $Y = 16\text{px} \sim 24\text{px}$、$\text{blur} = 32\text{px} \sim 48\text{px}$、不透明度 3%（広く薄く拡散するPenumbra）

# ステップ 4: スプレッド収縮（Negative Spread Choke）の適用

広範囲のぼかしを入れたレイヤーでは、スプレッドに負の値（例: spread: -4px 〜 -8px）を指定します。影の輪郭を内側に引き締め（Choke）ながら光の拡散だけを残すことで、周囲が黒ずむ「泥濁り現象」を完全に防止し、洗練された高級感のある影を作り出せます。

# ステップ 5: インセットハイライト（Inset Rim Lighting）の付加

最上部に新しいレイヤーを追加し、Inset スイッチをオンにします。オフセットを $X = 0, Y = 1\text{px}$、$\text{blur} = 1\text{px}$、スプレッド $0\text{px}$ に設定し、白色（#FFFFFF）の不透明度を 15% 〜 20% に設定します。要素の上辺に微細なハイライト光が入り、ガラスエッジの面取り加工や高級感のあるカードデザインが完成します。

# ステップ 6: 目的の構文へワンクリックエクスポート

出力タブから目的のフォーマットを選択します。

• Vanilla CSS: 標準の box-shadow: ...; 宣言
• Tailwind CSS: shadow-[...] 形式の任意値ユーティリティクラス
• React Inline Style: キャメルケースオブジェクト形式
• CSS Custom Properties: デザイントークン定義用変数

「CSSをコピー」 ボタンをクリックすると、クリップボードへ即座に格納されます。

# プロダクション対応の実装コード

# 1. モダンTypeScript実装（設計システム向け多層シャドウ生成エンジン）

デザインシステムやUIライブラリでElevationスケールを自動計算・管理するための型安全なTypeScriptモジュールです。

/**
 * 個々のシャドウレイヤーを表す幾何構造インターフェース
 */
export interface ShadowLayer {
  x: number;          // 水平オフセット (px)
  y: number;          // 垂直オフセット (px)
  blur: number;       // ガウスぼかし半径 (px)
  spread: number;     // スプレッド収縮/拡大距離 (px)
  color: string;      // HEXカラーコード (#000000 または #000)
  opacity: number;    // アルファ不透明度 (0〜100 のパーセンテージ)
  inset: boolean;     // 内側シャドウフラグ
}

/**
 * HEXカラー文字列と不透明度数値をRGBA文字列へ安全に変換する
 */
export function hexToRgba(hex: string, alphaPercent: number): string {
  const cleanHex = hex.replace("#", "").trim();
  let r = 0, g = 0, b = 0;

  if (cleanHex.length === 3) {
    r = parseInt(cleanHex[0] + cleanHex[0], 16);
    g = parseInt(cleanHex[1] + cleanHex[1], 16);
    b = parseInt(cleanHex[2] + cleanHex[2], 16);
  } else if (cleanHex.length === 6) {
    r = parseInt(cleanHex.substring(0, 2), 16);
    g = parseInt(cleanHex.substring(2, 4), 16);
    b = parseInt(cleanHex.substring(4, 6), 16);
  } else {
    // パース失敗時の安全なフォールバック
    return `rgba(0, 0, 0, ${Math.min(Math.max(alphaPercent / 100, 0), 1)})`;
  }

  const alpha = Math.min(Math.max(alphaPercent / 100, 0), 1);
  return `rgba(${r}, ${g}, ${b}, ${Number(alpha.toFixed(3))})`;
}

/**
 * 単一のレイヤーオブジェクトをCSSトークン文字列へ直列化
 */
export function layerToCssToken(layer: ShadowLayer): string {
  const insetPrefix = layer.inset ? "inset " : "";
  const spreadSuffix = layer.spread !== 0 ? ` ${layer.spread}px` : "";
  const colorStr = hexToRgba(layer.color, layer.opacity);
  return `${insetPrefix}${layer.x}px ${layer.y}px ${layer.blur}px${spreadSuffix} ${colorStr}`;
}

/**
 * 複数レイヤーから Vanilla CSS または Tailwind CSS 任意値クラスを生成
 */
export function buildBoxShadow(
  layers: ShadowLayer[],
  format: "css" | "tailwind" = "css"
): string {
  if (!layers.length) return format === "css" ? "box-shadow: none;" : "shadow-none";

  if (format === "tailwind") {
    // Tailwind任意値クラスでは空白をアンダースコアに置換し、カンマ区切りを維持する
    const tailwindValue = layers
      .map(l => layerToCssToken(l).trim().replace(/\s+/g, "_"))
      .join(",");
    return `shadow-[${tailwindValue}]`;
  }

  return `box-shadow: ${layers.map(layerToCssToken).join(", ")};`;
}

/**
 * 階層レベル (0〜5) に応じて調和のとれた多層Elevationシャドウを動的生成
 */
export function generateElevationScale(level: number): ShadowLayer[] {
  const clampedLevel = Math.max(0, Math.min(level, 5));
  if (clampedLevel === 0) return [];

  const layers: ShadowLayer[] = [];
  const baseAlpha = Math.max(12 - clampedLevel * 1.5, 4);

  // 1. 接触影 (Umbra)
  layers.push({
    x: 0,
    y: 1,
    blur: 2,
    spread: 0,
    color: "#000000",
    opacity: baseAlpha * 1.2,
    inset: false,
  });

  // 2. 中間〜拡散環境光 (Penumbra)
  for (let i = 1; i <= clampedLevel; i++) {
    const yOffset = Math.pow(2, i);
    const blurRadius = yOffset * 2;
    const spreadChoke = -(Math.pow(2, Math.max(0, i - 2)));

    layers.push({
      x: 0,
      y: yOffset,
      blur: blurRadius,
      spread: spreadChoke,
      color: "#000000",
      opacity: Number((baseAlpha / (i * 1.2)).toFixed(1)),
      inset: false,
    });
  }

  return layers;
}

# 2. モダンJavaScript（ES2022+）ブラウザ用実装

DOMノードへ動的にスタイルを適用し、ホバーアニメーションの再描画負荷を最小化するブラウザ実行ユーティリティです。

/**
 * 要素へGPU合成スレッド最適化されたシャドウトランジションを付与するヘルパー
 * @param {HTMLElement} element - 対象のDOM要素
 * @param {string} restShadow - 通常時のbox-shadow値
 * @param {string} hoverShadow - ホバー時のbox-shadow値
 */
export function applyOptimizedHoverShadow(element, restShadow, hoverShadow) {
  // 親要素に相対位置を指定
  element.style.position = 'relative';
  element.style.boxShadow = restShadow;
  element.style.transition = 'transform 200ms cubic-bezier(0.16, 1, 0.3, 1)';

  // 既存の擬似スタイル用クラスの重複登録を防止
  const styleId = `shadow-opt-${Math.random().toString(36).slice(2, 9)}`;
  element.dataset.shadowId = styleId;

  // ホバー用シャドウを担う ::after 疑似要素を動的スタイルシート経由で注入
  const styleTag = document.createElement('style');
  styleTag.textContent = `
    [data-shadow-id="${styleId}"]::after {
      content: "";
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      border-radius: inherit;
      box-shadow: ${hoverShadow};
      opacity: 0;
      transition: opacity 200ms cubic-bezier(0.16, 1, 0.3, 1);
      pointer-events: none;
      z-index: -1;
    }
    [data-shadow-id="${styleId}"]:hover {
      transform: translateY(-2px);
    }
    [data-shadow-id="${styleId}"]:hover::after {
      opacity: 1;
    }
  `;
  document.head.appendChild(styleTag);
}

# 3. モダンPython 3.11+ 実装（デザインシステム・トークン自動生成スクリプト）

CI/CDパイプラインやデザイントークンのビルドスクリプトで、Figma等のJSON定義からCSSおよびTailwind定義を出力するPythonモジュールです。

from dataclasses import dataclass
from typing import List, Literal
import math

@dataclass(frozen=True, slots=True)
class ShadowLayer:
    """単一のシャドウレイヤー定義"""
    x: int
    y: int
    blur: int
    spread: int
    color_hex: str
    opacity: float  # 0.0 〜 100.0 のパーセンテージ
    inset: bool = False

    def to_css_token(self) -> str:
        """W3C準拠の単一シャドウトークン文字列へ変換"""
        hex_clean = self.color_hex.lstrip("#")
        if len(hex_clean) == 3:
            hex_clean = "".join(c * 2 for c in hex_clean)
        
        r = int(hex_clean[0:2], 16)
        g = int(hex_clean[2:4], 16)
        b = int(hex_clean[4:6], 16)
        alpha = round(max(0.0, min(self.opacity / 100.0, 1.0)), 3)
        rgba_str = f"rgba({r}, {g}, {b}, {alpha})"

        inset_str = "inset " if self.inset else ""
        spread_str = f" {self.spread}px" if self.spread != 0 else ""
        return f"{inset_str}{self.x}px {self.y}px {self.blur}px{spread_str} {rgba_str}"

def export_box_shadow(
    layers: List[ShadowLayer], 
    format_type: Literal["css", "tailwind"] = "css"
) -> str:
    """レイヤーリストからCSS宣言またはTailwind任意値クラスを生成"""
    if not layers:
        return "box-shadow: none;" if format_type == "css" else "shadow-none"

    tokens = [l.to_css_token() for l in layers]

    if format_type == "tailwind":
        # 空白文字をアンダースコアへ置換し、カンマ区切りを連結
        escaped_tokens = ["_".join(t.split()) for t in tokens]
        return f"shadow-[{','.join(escaped_tokens)}]"

    return f"box-shadow: {', '.join(tokens)};"

# 使用例: Elevation-2 (浮き上がったカード) の生成
if __name__ == "__main__":
    card_elevation = [
        ShadowLayer(x=0, y=1, blur=3, spread=0, color_hex="#000", opacity=10.0),
        ShadowLayer(x=0, y=4, blur=8, spread=-2, color_hex="#000", opacity=8.0),
        ShadowLayer(x=0, y=12, blur=24, spread=-4, color_hex="#000", opacity=4.0),
    ]

    print("--- CSS 出力 ---")
    print(export_box_shadow(card_elevation, "css"))
    print("\n--- Tailwind CSS 出力 ---")
    print(export_box_shadow(card_elevation, "tailwind"))

# 開発現場で頻出する落とし穴とエッジケース

# 1. レイヤースタックの宣言順序の逆転による視覚的破綻

W3Cの仕様上、カンマで連結されたシャドウは「前方に記述されたレイヤーほど手前に描画される」という厳格な優先順位を持ちます。

• 失敗例: 広範囲に拡散するアンビエント影（blur: 32px）を先頭に書き、狭い接触影（blur: 2px）を後方に記述する。
• 結果: 拡散影の中心部の濃い塗りが手前を覆ってしまい、せっかくの繊細な接触影が塗りつぶされて濁って見えます。
• 対策: 必ず「シャープな接触影（Umbra）→ 中間層 → 拡散環境光（Penumbra）」の順にカンマ区切りで宣言してください。

# 2. CSSアニメーション中の高頻度リペイントによるFPS低下（Jank）

要素のホバー時に box-shadow を直接 transition すると、アニメーションの各フレーム（16.6ms毎）でブラウザのメインスレッドが強制的に再描画（Paint）を実行します。複雑なDOMツリーやモバイル端末ではフレーム落ち（Jank）の直接原因になります。

• 推奨アーキテクチャ: ホバー後のシャドウを持たせた ::after 疑似要素（または同サイズの子要素）を position: absolute で重ね、通常時は opacity: 0、ホバー時に opacity: 1 へ遷移させます。不透明度（opacity）の変化はGPUのコンポジタースレッドでハードウェアアクセラレーション処理されるため、メインスレッドをブロックせず滑らかな60 FPSを維持できます。

/* ❌ パフォーマンス低下を引き起こす実装 */
.card-bad {
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  transition: box-shadow 0.2s ease;
}
.card-bad:hover {
  box-shadow: 0 16px 32px rgba(0,0,0,0.15); /* 毎フレームPaintが発生 */
}

/* ⭕ GPUコンポジターを活用した60 FPS最適化実装 */
.card-good {
  position: relative;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.card-good::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 16px 32px rgba(0,0,0,0.15);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}
.card-good:hover::after {
  opacity: 1; /* GPUスレッドで高速合成 */
}

# 3. 負のスプレッド指定時の角丸消失アーティファクト

要素に border-radius: 12px が設定されている状態で、影の引き締めの目的で spread: -16px を指定すると、影の角丸半径は $R{\text{shadow}} = \max(0, 12 - 16) = 0\text{px}$ となり、完全に鋭利な直角（90度）に変形します。角丸ボタンやカードの背後から四隅のトゲのように角が飛び出すバグが発生します。負のスプレッドを使用する際は、必ず絶対値をボーダー半径未満（$|s| < R{\text{border}}$）に制限してください。

# 4. 透過背景要素における外側シャドウの非透過問題

W3Cの仕様に基づき、外側シャドウは要素の境界ボックス（border-box）直下の領域が完全に切り抜かれます。そのため、background-color: transparent や半透明のPNG画像を持つ要素に box-shadow を適用しても、要素の中央直下には影が描画されず、外周枠の外側だけに不自然な影が浮き出ます。内部が透明なアイコンや切り抜き画像に自然な影を落としたい場合は、filter: drop-shadow() を使用する必要があります。

# 5. box-shadow と filter: drop-shadow() の根本的な挙動差異

両者は混同されやすいプロパティですが、内部アルゴリズムが根本的に異なります。

# 6. Tailwind CSS 任意値記法（Arbitrary Values）の構文エラー

Tailwind CSSで生成したシャドウを shadow-[...] で適用する際、CSS値の中に半角スペースが含まれていると、TailwindのJITコンパイラがクラス名の区切り文字として誤認し、ビルドエラーまたはスタイルの完全な無効化が発生します。

• すべての半角スペースをアンダースコア（_）に変換してください。
• 複数レイヤーを区切るカンマの直後にはスペースやアンダースコアを絶対に入れないでください（例: shadow-[04px6px-1pxrgba(0,0,0,0.1),02px4px-2pxrgba(0,0,0,0.05)]）。ToolsAAのエクスポート機能は、このフォーマット変換を完全自動で行います。

# 7. Windows ハイコントラストモード（Forced Colors Mode）における消失問題

アクセシビリティ設定である Windows High Contrast Mode（forced-colors: active）では、OS側の視覚支援エンジンによってすべての box-shadow が強制的に消去されます。境界線を影だけに依存して設計されたカードUIは、境界線が完全に消失してコンテンツ同士が融合してしまいます。

• アクセシビリティ対応策: 対象要素にあらかじめ border: 1px solid transparent; を定義しておきます。通常環境では透明で見えませんが、ハイコントラストモードが有効化された際にOSが高コントラストな実線ボーダーとして自動描画し、境界の可読性を担保します。

# 充実したFAQセクション

# Q1: 不自然な「黒ずんだ輪郭」を出さず、なめらかでリアルな影を作るコツは？

回答: 3〜4層のマルチレイヤースタッキングを採用し、各層のアルファ不透明度を 3%〜8% 程度と極めて低く設定してください。さらに、ぼかし半径を大きく広げた下層のレイヤーに対して負のスプレッド（例: spread: -4px 〜 -8px）を指定して輪郭を内側に引き締める（Negative Choke）ことで、周囲が泥濁りするのを防ぎつつ、羽毛のように滑らかで物理的に正しい環境光を再現できます。

# Q2: box-shadow のアニメーション（:hover等）が重くカクつく理由と、60 FPSを維持する最適化テクニックは？

回答: box-shadow の数値をアニメーションさせると、各フレームごとにブラウザのGPUラスタライザによる再描画（Paint）が強制実行されるためです。これを回避するには、要素の ::after 疑似要素にホバー後のシャドウをあらかじめ設定し、通常時は opacity: 0、ホバー時に opacity: 1 へ遷移させます。不透明度の変化はGPU合成スレッド（Compositor Thread）でのみ処理されるため、再描画を一切スキップして常時60 FPSの極めて滑らかなアニメーションが保証されます。

# Q3: box-shadow と filter: drop-shadow() はどのように使い分けるべきですか？

回答: カード、モーダル、ボタン、入力フォームなどの矩形要素には、スプレッドによる微調整や inset による内側ハイライトが可能な box-shadow を使用します。一方、吹き出しの三角形の矢印、透過PNGイラスト、SVGアイコン、テキストと透過が混在する装飾など、不規則な輪郭のアルファチャンネルに沿って影を落としたい場合は filter: drop-shadow() を選択してください。

# Q4: 生成された影のコードを Tailwind CSS の任意値クラス（shadow-[...]）に適用する際の注意点は？

回答: TailwindのJITエンジンはクラス名内の半角スペースを解析できないため、値に含まれるすべての半角スペースをアンダースコア（_）に置き換える必要があります。また、レイヤー間を区切るカンマの直後にスペースやアンダースコアを残してはいけません。ToolsAAの「Tailwind」出力モードを使用すれば、これらの変換規則が適用された完成済みのクラス名をワンクリックでコピーできます。

# Q5: border-radius を設定しているのに負のスプレッド（spread: -10px 等）を指定すると四隅が直角になってしまうのはなぜですか？

回答: W3Cの幾何仕様に基づき、影の外側の曲率半径は $R{\text{shadow}} = \max(0, R{\text{border}} + s)$ で計算されます。負のスプレッドの絶対値が要素のボーダー半径以上になると（$|s| \ge R{\text{border}}$）、計算結果が $0\text{px}$ に丸められ、角丸が完全に崩壊して直角になります。このアーティファクトを防ぐには、スプレッドの縮小量を常にボーダー半径より小さく（$|s| < R{\text{border}}$）設定してください。

# Q6: ToolsAAのボックスシャドウジェネレーターで作成したカスタムパレットやデザイントークンは外部サーバーへ送信されますか？

回答: いいえ、一切送信されません。ToolsAAは厳格なゼロサーバー・プライバシーアーキテクチャ（"use client"）で構築されています。すべてのスライダー操作、極座標変換、色空間計算、コードフォーマット処理はお使いのブラウザ内（V8 / JavaScriptCore）のローカルメモリでのみ実行されます。外部APIへのHTTPリクエスト、分析トラッキング、サーバーログ収集は完全に排除されており、企業秘密のデザインシステムでも安心してご利用いただけます。

# Q7: inset シャドウの内部レンダリング構造と、グラスモーフィズムやニューモーフィズムへの応用方法は？

回答: inset を付与すると、ブラウザのクリッピングマスクが反転し、境界ボックス（border-box）の外側がカットされ、内側のパディング領域に向かって影が落ちます。グラスモーフィズムでは上端に1pxの極薄ホワイトインセット（inset 0 1px 1px 0 rgba(255,255,255,0.2)）を配することでガラスの斜面反射を表現できます。ニューモーフィズムでは、左上の明るいインセットハイライトと右下の暗いインセットシャドウを対向配置することで、凹んだボタンの物理形状をシミュレートできます。

# Q8: モバイルブラウザ（iOS Safari / Android Chrome）で複数の影を重ねる場合のパフォーマンス配慮点は？

回答: モバイル端末のGPUメモリ帯域幅はデスクトップに比べて制約があります。5層以上の極端にぼかし半径の大きいシャドウ（blur: 100px 超）を多数の要素に適用すると、スクロール時の描画負荷が跳ね上がります。モバイル向けコンポーネントではレイヤー数を2〜3層に抑え、スクロール対象の親コンテナには will-change: transform や contain: paint を適切に付与して描画領域を隔離することを推奨します。

# 技術比較マトリクス：用途・コンポーネント別推奨設定

# まとめ

ToolsAA インタラクティブ CSS Box Shadow ジェネレーター は、物理学に基づく光の分散アルゴリズムと、厳格なプライバシー保護アーキテクチャを融合させた、プロフェッショナルWebエンジニアのための高度なスタイリング支援ツールです。

単一の暗い影による野暮ったいデザインから脱却し、ガウスぼかし近似、負のスプレッド収縮（Choke）、調和のとれた多層スタッキングを活用することで、Google Material 3 や Tailwind UI に匹敵する洗練された空間階層を瞬時に生み出すことができます。

未発表のブランドパレットや企業独自のデザイントークンを一切外部サーバーに送信することのない完全クライアントサイド実行モデル（100% Client-Side Evaluation）の安心感のもと、モダンWebフロントエンド開発における直感的かつ高精度なシャドウデザインをぜひ体験してください。