ボックスシャドウ生成ツール

CSSのbox-shadowプロパティは、HTML要素にドロップシャドウや内側シャドウを追加するためのプロパティです。以下の値を指定します。

• offset-x / offset-y：シャドウの水平・垂直方向のオフセット。正の値で右下に移動し、負の値で左上に移動します。
• blur-radius：ぼかしの半径。値が大きいほどシャドウが広がり、ぼやけます。0pxだと鮮明な影になります。
• spread-radius：シャドウの拡張サイズ。正の値でシャドウが広がり、負の値で収縮します。
• color：シャドウの色。rgba()を使えば透明度も指定可能です。
• inset（任意）：このキーワードを付けると、外側ではなく内側にシャドウが描画されます。

例: box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1);

box-shadowプロパティは、カンマ区切りで複数のシャドウを指定できます。これにより、単一のシャドウでは実現できないリアルで奥行きのある影を表現できます。

• Tailwind CSS v4の影：shadow-sm・shadow-md・shadow-lg・shadow-xlは2層、shadow-2xlは1層の定義です。このツールの「Tailwind」プリセットは公式の現行値に合わせています。
• 重なり順：複数指定では先頭のシャドウが最前面に描画され、その後のシャドウが順に背面へ重なります。
• パフォーマンス：大きなぼかしや多数のレイヤーを頻繁に動かすと描画負荷が増える場合があります。実際の対象端末で計測し、必要なら疑似要素のopacityを動かす方法などと比較してください。

このツールでは描画負荷と操作量を抑えるため最大8層まで追加でき、リアルタイムのプレビュー、CSSプロパティ、Tailwind CSS任意値クラスを同時に確認できます。

ニューモーフィズム（Neumorphism）は、2020年頃から注目されたUIデザインのトレンドで、スキューモーフィズムとフラットデザインを融合させたスタイルです。

• 原理：背景と同色の要素に、明るい影（光源側）と暗い影（反対側）を付けることで、要素が背景から押し出されたような立体感を作ります。
• 実装：2つのbox-shadowを使います。1つは左上方向に白っぽい影、もう1つは右下方向に暗い影です。例: box-shadow: 6px 6px 12px rgba(0,0,0,0.15), -6px -6px 12px rgba(255,255,255,0.5);
• 注意点：コントラストが弱くなりがちなため、アクセシビリティ面での配慮が必要です。特にボタンやインタラクティブ要素では、状態の区別がつきにくくならないよう注意しましょう。

このツールのプリセットから「Neumorphism」を選択すると、ニューモーフィズムスタイルの基本設定がすぐに適用されます。