box-shadowの5つの値
box-shadow: X Y ぼかし 広がり 色; の順です。
Xは左右、Yは上下のずれ。ぼかしを大きくすると柔らかく、
広がりを負の値にすると影が小さく締まります。
きれいに見える影のコツ
濃くて真っ黒な影は、安っぽく見えがちです。 色を少し青や紫に寄せ、濃さ(不透明度)を10〜20%程度に抑えると、上品で自然な影になります。 Yを少しだけ下げ、ぼかしを広めに取ると、ふわっと浮いた印象になります。
多重影で立体感を出す
影は , で区切って何枚でも重ねられます。
「近くて濃い小さな影」と「遠くて薄い大きな影」を重ねると、
1枚だけのときより自然で奥行きのある見え方になります。このツールの「影を追加」で試せます。
このツールについて
入力内容はブラウザの中だけで処理され、サーバーに送信されることはありません。