CSSボックスシャドウ生成器 — 影を視覚的に設定

ボックスシャドウはUIに深みを加えます。CSSのbox-shadowプロパティは複数のパラメータがあり、視覚化が難しいです。生成器で視覚的に設定できます。

box-shadowの構文

box-shadow: 水平オフセット 垂直オフセット ぼかし 広がり 色 inset。プラスの水平オフセット＝右。プラスの垂直オフセット＝下。ぼかし＝ぼやけの大きさ。广がり＝拡張量。inset＝内側の影。

複数のシャドウを重ねる

CSSはカンマで区切った複数のボックスシャドウをサポートします。柔らかな外側のグローと微妙な内枠の組み合わせなど複雑な効果が可能。2〜3個まで——それ以上は不自然に見えます。

リアルな影

良い影は一貫した光の方向を向いています。Material Designは高さレベルに基づいた影を使用。大きなオフセット・高いぼかし・低い不透明度の微妙な影がプロらしく見えます。