Box Shadow Generator

使い方

1. プリセットを選ぶか、最初のレイヤーのオフセット、ぼかし、拡張、色、不透明度を調整します。
2. より自然な奥行きを出すにはレイヤーを追加します。内側に影を付けるには「Inset」にチェックを入れます。
3. プレビューの背景色とボックスの色をデザインに合わせて変更し、CSSをコピーします。

仕組み

box-shadowでは、各レイヤーに水平方向のオフセット、垂直方向のオフセット、ぼかし半径、拡張半径、色を指定します。必要に応じて先頭にinsetを付けます。正のオフセットは影を右下に移動します。ぼかしを加えると輪郭が柔らかくなります。ぼかし半径に負の値は指定できません。拡張半径は、ぼかす前に影を広げ（正の値）たり縮めたり（負の値）します。複数のレイヤーはカンマで区切り、最初のレイヤーが最前面に描画されます。

自然な立体感を出すには、薄い不透明度で小さくくっきりした影と、大きく柔らかな影を組み合わせるのが一般的です。「浮き上がり」プリセットではこの方法を使っています。色は不透明度を明示できるrgba()で記述します。影は要素のborder-radiusに沿って描画され、レイアウト上のスペースを取らないため、ほかの要素を移動させることはありません。

多くの要素に非常に大きなぼかしを指定すると、性能の低いスマートフォンではスクロールが遅くなることがあります。影をアニメーションさせる場合は、box-shadow自体をアニメーションさせるより、あらかじめ影を付けた疑似要素をフェードインさせるほうが滑らかです。

使用例

よくある質問

プライバシー

CSSはブラウザー内で生成されます。データがアップロードまたは保存されることはありません。