このツールに問題がありますか？
「CSS Box Shadow Generator Online」について
このツールは、オフセット・ぼかし・拡散・色・不透明度をスライダーで操作して CSS の box-shadow を視覚的に構築します。リアルタイムで結果を確認し、満足したら CSS をコピーできます。
ボックスシャドウは奥行きを与え、背景から要素を分離し、ホバー／押下／フォーカスなどのインタラクションを示します。多層シャドウは Material Design のエレベーションや Neumorphism のような複雑な照明表現も可能。
カード、モーダル、ポップオーバー、ボタンなど、視覚的な浮き上がりが必要な UI に。クラシックな box-shadow、多層シャドウ、モダンなオフセット／ブラー指定の出力に対応。
このツールの使い方
box-shadow CSS 宣言を組み立てる手順
オフセット
「X offset (px)」と「Y offset (px)」で水平（正＝右）と垂直（正＝下）に動かします。CSS 既定は無し。カード影は Y を `4` 程度、X を 0 近辺にすることが多いです。
ブラーと色
「Blur (px)」は柔らかさ — 0 はエッジが立ち、10+ で霞んだ感じ。「Color」は任意の CSS 色（α付き rgba/hex 含む）。控えめな UI 影には `rgba(0,0,0,0.15)` + ほどよい blur が定番。
「実行」
結果は `css` のみ — `<x>px <y>px <blur>px <color>`。`box-shadow:` の値として貼り付け。spread や inset は出力しません — 仕様では使えますが、このツールは 4 引数形式に絞っています。
影の多重スタック
実際のデザインは深みを出すため、長く柔らかい影＋短く詰まった影など、2〜3 層をカンマ区切りで重ねます。各層をこのツールで作り、1 つの `box-shadow:` 値内でカンマ連結してください。