このツールについて

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

複数のシャドウを重ねられますか?

ジェネレーターは一度に 1 層のシャドウを作ります。複数層にするには、CSS 側で値をカンマでつなげてください。

Tailwind のクラスはどう作られますか?

shadow-[…] 内ではスペースがアンダースコアになります。これが Tailwind の任意値の書き方です。rgba() 内のスペースは、ツールがすでに取り除いています。