CSS box-shadow生成
スライダーをドラッグして、CSSをコピーします。
- ブラウザ上で動作します — テキストはどこにも送信されません
- 登録不要、利用回数の上限なし、何度でも無料で使えます
仕組み
box-shadowは、4つの数値と1つの色を決まった順序で受け取ります。奥行きに見える影と、シールのように見える影との違いは、完全にこれらの数値にあります。ドラッグしながら変化を見るほうが、推測するよりずっと速く済みます。
4つの数値の意味
順に、水平オフセット、垂直オフセット、ぼかし半径、広がりです。オフセットは影を動かし、ぼかしはその縁を柔らかくし、広がりはぼかす前に影を拡大または縮小します。広がりを負の値にすると影が内側に引き込まれ、カードの下にまとまった影を、側面に広げずに作れます。
本物らしく見せる
光は通常、上から来るため、水平オフセットなしで小さな正の垂直オフセットを付けると自然に見えます。大きくてとても透明な影は柔らかな奥行きに、小さくて濃くシャープな影は切り抜きのシールのように見えます。実際の物体は、表面から離れるほど影がぼやけます。ぼかしが大きいほど、要素が高い位置にあるように見えます。
インセットシャドウ
インセットシャドウは、要素の外側ではなく内側に描かれます。押された状態のボタン、入力欄、へこんだパネルは、これで作られています。同じ4つの数値が適用されますが、向きが内側になります。
複数の影を同時に
CSSはカンマ区切りのリストを受け付けるため、まとまって濃いものと、広く淡いものの2つを重ねると、1つだけよりもかなりきれいに見えます。このツールが生成するのは1つなので、重ねた効果を得るには、自分で2つを貼り合わせてください。
CSS box-shadow生成に関する質問
値は、どの順序ですか？
水平オフセット、垂直オフセット、ぼかし、広がり、そして色の順です。
広がりを負の値にするとどうなりますか？
ぼかす前に影が縮むため、影が側面に広がらず、要素の真下にまとまります。
インセットシャドウとは何ですか？
要素の外側ではなく内側に描かれる影です。押された状態のボタンや入力欄に使われます。
影を重ねられますか？
直接はできません。CSSはカンマ区切りのリストを受け付けるため、2つ生成して貼り合わせてください。