ボックスシャドウジェネレーター
ずれ、ぼかし、広がりをスライダーで決めて、box-shadowの1行をコピーします。
CSS
CSSのボックスシャドウをオンラインで作る
影はカード、ボタン、メニューをページから浮き上がらせます。このページはCSSジェネレーターをボックスシャドウのタブで開くので、数値を書き換えて再読み込みする代わりに、プレビューを見ながら影を調整できます。
よく使う影
| CSS | 用途 |
|---|---|
box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2); | カードや入力欄の細い影 |
box-shadow: 0px 12px 32px -8px rgba(30, 27, 75, 0.35); | ふんわり浮いたカード |
box-shadow: 4px 4px 0px 0px rgba(0, 0, 0, 1); | ずらしたくっきりした影、フラットなスタイル |
box-shadow: inset 0px 2px 4px 0px rgba(0, 0, 0, 0.25); | へこんだ入力欄やボタン |
パフォーマンス
大きくぼかした影は描画に時間がかかり、アニメーションさせると特に重くなります。ホバー時に影をアニメーションさせるなら、影を疑似要素に付けて、影そのものではなくその不透明度をアニメーションさせるのがよく使われる方法です。
関連ツール
同じ要素の角を丸めるなら、角丸（border-radius）ジェネレーターをご覧ください。影は角丸に沿います。背景にはCSSグラデーションジェネレーターが使えます。