CSS box-shadow生成の無料オンラインツール。オフセット・ブラー・スプレッド・色を調整、リアルタイムプレビュー。コードコピー可能。ブラウザ処理。
Ctrl+D を押してこのページをブックマークしてください
CSSボックスシャドウ生成ツールは、box-shadowプロパティを視覚的に編集する無料オンラインツールです。 オフセット、ブラー、スプレッド、色をスライダーで調整しリアルタイムプレビューで確認します。 複数シャドウ、inset対応。 ブラウザ内で処理されます。
はい、複数のシャドウを追加して複雑な奥行きと効果を作成できます。各シャドウは個別に調整できます。
insetシャドウは要素の内側に表示されるシャドウです。通常のbox-shadowは外側に表示されますが、insetを追加すると凹んだ効果を作れます。
現実の影は黒ではなく背景色が暗くなったものに近く、外側へいくほどぼやけます。黒30%の影を1つ大きく入れるより、ごく薄い影を2〜3枚、異なるぼかし半径で重ねるほうがはるかに自然です。たとえば手前に1pxをわずかに、その後ろに8pxを広めに、さらに後ろに24pxをごく薄く置く形です。光源は上にあると仮定し、縦方向のオフセットだけを与えて横は0にしてください。
静止した状態ではほとんど影響しませんが、アニメーションと組み合わさると話が変わります。マウスを乗せたときにbox-shadowの値を変化させると、ブラウザが毎フレーム影を計算し直すため、性能の低い端末では目に見えてカクつきます。影が広がる効果が必要なら、あらかじめ描いておいた影レイヤーのopacityやtransformだけを変える方式にすると、はるかになめらかになります。