CSSボックスシャドウジェネレーター

box-shadowの構文

box-shadow: <x-offset> <y-offset> <blur> <spread> <colour> [inset];

• x-offset: 正の値は右、負の値は左を表します。
• y-offset: 正の値は下、負の値は上を表します。
• blur: 0ならくっきりとした輪郭、値が大きいほどやわらかくなります。見た目のサイズは、要素の外側にぼかし値の約1.5倍ほど広がります。
• spread: 要素の外側に加わる追加のサイズです。正の値ではシャドウが大きくなり、負の値では小さくなります（控えめなハローに便利です）。
• colour: あらゆるCSSの色に対応します。rgba(0, 0, 0, 0.15) が定番中の定番です。
• inset: 要素の内側にシャドウを反転させるキーワードです。

多層シャドウはリアルに見える

このジェネレーターは一度に 1 つのシャドウルールしか出力しません。複数レイヤーのシャドウを作るには、各レイヤーを個別に生成し、ルールをカンマで結合してください。

0 0 40px のシャドウを1つだけ使うと、ぼんやりとした印象になります。要素の近くに置く小さく鋭いシャドウと、外側に置く大きくやわらかいシャドウの2層を重ねると、実際の光が散乱する様子を再現できます。

box-shadow:
  0 1px 2px rgba(0, 0, 0, 0.08),
  0 4px 12px rgba(0, 0, 0, 0.08);

1行目は密着した接地シャドウを、2行目はよりやわらかい環境シャドウを表します。このひとつのパターンだけで、カード型UIの80%をカバーできます。

エレベーションシステム

マテリアルデザインでは6段階のエレベーション（高度）を使い、それぞれ異なるシャドウの組み合わせを割り当てています。簡略化すると次のとおりです。

エレベーションの役割ごとに1つを選び、一貫して使いましょう。

色付きシャドウのほうが自然に見える

純粋な黒のシャドウは人工的に見えます。実際のシャドウは、その下にある表面の色を帯びるからです。次のように試してみてください。

box-shadow: 0 12px 24px rgba(40, 80, 120, 0.18);

純黒ではなく、クールな青みがかったグレーを使っています。暖色系の背景では、より暖かみのある色合いを選びましょう。

パフォーマンス

ボックスシャドウは再描画のたびに描かれます。多くの要素に大きく重いシャドウを設定すると、スクロールが遅くなることがあります。対策は次のとおりです。

• 要素に transform: translateZ(0) を指定し、合成レイヤーを強制的に生成します。
• シャドウをclip-pathに沿わせる必要がある場合にかぎり、複雑なシャドウを filter: drop-shadow() に置き換えます（一般的には処理が遅くなります）。
• 頻繁に再描画される要素では、シャドウを控えめにします。

押し込み状態のためのinset

.button:active {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.12);
}

insetシャドウはくぼんだ見た目を演出し、ボタンが表面に押し込まれたように見せます。下方向への小さな transform: translateY(1px) と組み合わせると、触感のあるクリック感が得られます。