CSS box-shadow生成ツール

① このツールの使い方

• •1. プリセットから選ぶ：「カード」「大きな影」「内側の影」など、よく使う影のスタイルをワンタップで試せます。
• •2. スライダーで細かく調整する：X・Y方向のオフセット、ぼかし、広がり、色をそれぞれ動かして好みの影に仕上げます。

調整すると同時にプレビューが表示され、そのまま使えるCSSコード（box-shadow: ...）がコピーボタンで取得できます。

② box-shadowの5つのパラメータ

これらの値はbox-shadow: X方向 Y方向 ぼかし 広がり 色;という順番でCSSに記述します。たとえば「0px 4px 12px 0px #00000033」であれば、「横にはずらさず、下に4pxずらし、12pxぼかして、広がりはそのまま、色は薄い黒」という影になります。

③ 透明度（アルファ値）の指定方法

影の色は、16進数のカラーコードの末尾に2桁を追加することで透明度（アルファ値）を指定できます。00が完全な透明、FFが完全な不透明で、その間の値は透明度の度合いを表します。たとえば#00000033は「黒（#000000）に透明度20%程度（33）を加えた、薄い黒の影」を意味します。影を背景色になじませたい場合は、真っ黒よりもこうした半透明の色にするほうが自然に見えることが多いです。

④ insetで作る内側の影

insetを先頭に付けると、影が要素の外側ではなく内側に描画されるようになります。ボタンが押し込まれたような凹んだ質感の表現や、入力フォームの内側にうっすら影をつけて立体感を出したい場合に使われます。「内側の影」プリセットを選ぶと、このinsetを使った設定をすぐに試せます。

⑤ 実務での使いどころ

カードUIやボタン、モーダルウィンドウなど、Webデザインでは要素を浮き上がらせて視覚的な階層をつける目的で影がよく使われます。数値を1つずつ手で調整しながらブラウザで確認するのは時間がかかりますが、このツールならスライダーを動かしながらリアルタイムでプレビューを確認できるため、感覚的に理想の影を作りやすくなります。複数の影を重ねたい場合は、box-shadowにカンマ区切りで複数の値を並べることで実現できます（このツールは1つの影の値を作る用途に特化しています）。

影の色をHEX・RGB・HSLで調整したい場合はカラーコード変換ツール、px以外の単位で影の大きさを考えたい場合はCSS単位変換ツールもあわせてご利用ください。

⑥ 用意されている5つのプリセットの中身

「どこから触ればいいかわからない」というときは、まずプリセットを1つ選んでからスライダーを動かすのがおすすめです。それぞれの数値は次のようになっています。

プリセットを選んだあとにスライダーで微調整すれば、ゼロから数値を決めるより短時間で理想の影にたどり着けます。

⑦ Y方向のオフセットと光源の関係

自然な影に見せるコツのひとつは、Y方向のオフセットをX方向より大きめにすることです。現実の光は多くの場合、真上や斜め上から差し込むため、要素の下側にだけ影が伸びるのが自然に見えます。X・Yを両方とも同じくらいの値にすると、光源が斜め横にあるような不自然な影になりがちです。UIデザインで「浮いている」感覚を出したいときは、Y方向を4〜8px程度、X方向は0px前後に抑えるバランスがよく使われます。要素を強く持ち上げたいときはY方向とぼかしを両方大きくし、逆にさりげない立体感にしたいときはぼかしだけを大きくしてY方向は控えめにする、という調整の仕方も覚えておくと使い分けがしやすくなります。同じ数値のまま影の色だけを変えると印象がガラッと変わるので、色と数値の両方を少しずつ動かしながらプレビューで確認するのがおすすめです。慣れないうちは極端な値を試してから少しずつ戻していくと、ちょうどよい塩梅を見つけやすくなります。数値の感覚を体で少しずつ覚えると、次からは手早く狙った影を作れるようになります。

⑧ よくあるつまずきと直し方

• •影が濃すぎる・浮いて見える：色の透明度（アルファ値）を下げてみてください。たとえば#00000050を#00000020にするだけで、影がぐっと自然になることがあります。
• •影がカクカクして見える：ぼかしの値が小さすぎる可能性があります。ぼかしを大きくすると輪郭がなめらかになります。
• •影が親要素の外側で切れて見えない：親要素にoverflow: hiddenが指定されていると、はみ出した影ごと隠れてしまいます。影を見せたい要素の親のCSSを確認してください。

なお、box-shadowはカンマ区切りで複数の値を並べることで、1つの要素に何層も影を重ねられます。たとえばbox-shadow: 0px 1px 2px #00000010, 0px 4px 12px #00000020;のように、薄く濃い影を2つ重ねると、実際の光の当たり方に近い立体感のある影を作れます。このツールで1層ずつ値を作り、コピーした値をカンマでつないでいく使い方もおすすめです。