使い方

貼り付け → 実行 → 確認 → コピー。すべてはブラウザ内で完結します。

CSS・HTML・JSON などをエディタに貼ります。アップロードはしません。

変換または実行をクリック。結果はすぐに表示されます。

生成コードと注意書きを公開前に確認します。

出力をコピーしてプロジェクトに貼り付けます。

このツールについて

X と Y のずれ、ぼかし、広がり、色を調整でき、必要に応じて inset も指定できます。結果は box-shadow 宣言としても、Tailwind の shadow-[…] クラスとしても書き出せます。

初期値は、暗い背景の上に浮かぶカードの影を想定しています。

入力

0 8px 24px 0 rgba(0,0,0,0.2)

出力

box-shadow: 0px 8px 24px 0px rgba(0,0,0,0.2);

UI でよく使う柔らかい影は既定のスケールから外れがちなので、任意値で指定すると意図した見え方を保てます。