CSSの「影 (Box-Shadow)」でデザインに深みを与えるコツ

Webサイトがなんとなく平面的で、素人っぽく見えてしまう…。その原因は「影」の使い方にあるかもしれません。
box-shadow プロパティを適切に使うことで、要素に立体感と階層構造を持たせ、プロフェッショナルなUIを作ることができます。

1. 「真っ黒な影」は卒業しよう

初心者がやりがちなのが、#000000（完全な黒）の影を使ってしまうこと。これだと汚れのように見えてしまいます。
コツ： 色付きの薄い影（例：rgba(0, 0, 0, 0.15)）や、背景色になじむ色を使うと、モダンで清潔感のあるデザインになります。

2. 複数の影を重ねる（レイヤー）

現実世界の影は、1種類ではありません。「濃くて鋭い影」と「薄くて広い影」が混ざり合っています。
当ジェネレーターの「レイヤー追加」機能を使って、性質の違う2〜3個の影を重ねてみてください。驚くほどリアルで美しい影が作れます。

/* 複数の影の例（マテリアルデザイン風） */
            box-shadow: 
                0 1px 3px rgba(0,0,0,0.12), 
                0 1px 2px rgba(0,0,0,0.24);

3. Neumorphism（ニューモーフィズム）

明るい影（左上）と暗い影（右下）を組み合わせることで、要素が背景から隆起しているように見せるデザイン手法です。
これもジェネレーターを使えば、スライダーを調整するだけで簡単に実験できます。