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

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の影：Tailwind CSSのshadow-mdやshadow-lgは実は2層のシャドウで構成されています。近くの柔らかい影と遠くの広い影を組み合わせることで自然な奥行き感を演出しています。
• Material Designの影：Googleのマテリアルデザインでは3層のシャドウ（umbra, penumbra, ambient）を使って現実の光と影に近い表現を実現しています。
• パフォーマンス：box-shadowはブラウザの再描画コストが高いプロパティです。アニメーションする場合はwill-change: box-shadowを検討するか、疑似要素にシャドウを適用してopacityでアニメーションする手法が推奨されます。

このツールでは最大で何層でもレイヤーを追加でき、リアルタイムでプレビューしながら微調整できます。

ニューモーフィズム（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」を選択すると、ニューモーフィズムスタイルの基本設定がすぐに適用されます。