影を上に付けるには?

縦のずれに、マイナスの値を指定すると、影が、上側に出ます。

影を複数付けられますか?

カンマで区切って、複数の影を指定できます。ツールの出力を元に、影を追加して、調整できます。

影のずれ・ぼかし・広がり・色を調整して、CSSのbox-shadowコードを生成します。プレビューつき。

box-shadowは、要素に影を付けるCSSのプロパティです。カードやボタンに立体感を出したり、要素を浮かせて見せたりするのに使います。横のずれ・縦のずれ・ぼかし・広がり・色を、指定します。

数値を調整すると、プレビューがすぐに更新され、完成したCSSコードをコピーできます。影の色は、真っ黒ではなく、背景の色に合わせた不透明度の低い色にすると、自然な見た目になります。内側に影を付けるinsetも選べます。

こんなときに使えます

使うときのポイント

入力欄の初期値のまま計算すると、次の結果になります。条件は、横のずれが4px、縦のずれが6px、ぼかしが14px、広がりが0px、色(HEX)が#16293c、不透明度が25%、内側の影(inset)がいいえです。数値を変えると、この結果もそれに合わせて変わります。

結果: box-shadow: 4px 6px 14px 0px rgba(22, 41, 60, 0.25);

box-shadowは「横のずれ縦のずれぼかし広がり色」の順に指定します。insetを付けると内側に影が付きます。

box-shadowは、要素の周りに、影を付ける、CSSのプロパティで、カードや、ボタン、モーダルなどの、立体感を出すために、使われます。横のずれ、縦のずれ、ぼかしの大きさ、広がり、色の順に、指定します。inset を付けると、内側に影が付き、へこんだ表現になります。

影は、控えめにするほど、洗練された印象になります。ぼかしを大きく、色を薄くして、自然な光の当たり方を表現するのが、コツです。影の向きを画面全体で、統一すると、統一感が出ます。複数の影をカンマで並べて、重ねると、より繊細な、立体表現ができます。