offset-x / offset-y影をずらす位置
最初の2つの長さで横と縦の位置を決めます。負の値では左や上へ影が移動します。
box-shadow
要素の箱へ外側または内側の影を描くプロパティ。影の位置・ぼかし・広がり・色を組み合わせて比べられます。
遊んでみよう
カード本体を固定して影だけを変更
BOX-SHADOWカード
CSS
.element box-shadow: 12px 12px 20px 0 #7258e8;
値のパターン
box-shadowの構成要素
blur-radius / spread-radiusぼかしと広がり
3つ目で輪郭をぼかし、4つ目で影全体を広げたり縮めたりします。ぼかしは負にできません。
color / inset色と内側への切り替え
色で影の見え方を決め、insetを加えると外側ではなく要素の内側へ影を描きます。
早見表
初期値はnoneです。影を作るときは横位置と縦位置が必須で、その後ろへぼかし・広がり・色を並べます。
01
none影を描かない初期値02
8px 8px #202033右下へ輪郭のくっきりした影基本03
0 12px 24px #7258e8下へずらしたやわらかい影ぼかし04
0 0 0 4px #7258e8要素の周囲へ均等に広がる影広がり05
inset 0 0 16px #7258e8箱の内側へ描く影内側06
4px 4px #202033, 8px 8px #7258e8カンマで複数の影を重ねる複数よくある使い方
01
カードを背景から浮かせる
下方向へ薄くぼかした影を加え、カードが背景より手前にあるように見せます。
box-shadow: 0 12px 28px rgb(32 32 51 / 18%);02
フォーカス位置を囲む
ずらさずに広げた影を使うと、レイアウト寸法を変えずに入力欄の周囲を強調できます。
box-shadow: 0 0 0 4px #d9d2ff;03
押し込まれた面を表す
insetの影を内側へ描くと、入力欄や押されたボタンのくぼみを表現できます。
box-shadow: inset 0 3px 8px rgb(32 32 51 / 24%);ポイント
影は要素の大きさや配置を広げない。
box-shadowは見た目として箱の外へ広がっても、ボックスモデルの寸法や周囲の配置には影響しません。隣の要素と重なる場合は、必要な余白を別に確保します。祖先要素のoverflowで切り取られることもあります。影はすべての要素と::first-letterへ適用でき、子要素へ継承されません。複数の影はカンマで区切り、先に書いた影ほど手前に描かれます。
関連するCSSも見てみよう。
box-shadow と一緒に使われるプロパティや、詳しい外部リファレンスをまとめました。