CSS ボックスシャドウ ジェネレーター
無料のオンラインCSSボックスシャドウジェネレーター。リアルタイムプレビューで複雑なレイヤーシャドウを作成します。
CSS ボックスシャドウ ジェネレーター
無料のオンラインCSSボックスシャドウジェネレーター。リアルタイムプレビューで複雑なレイヤーシャドウを作成します。
CSS box-shadow について
カンマ区切りのシャドウレイヤーを作成
各レイヤーは、任意の inset、水平オフセット、垂直オフセット、ぼかし半径、広がり半径、色を持つ 1 つの box-shadow 値になります。複数レイヤーは同じ宣言内で結合され、標準 CSS box-shadow 構文に沿います。
ボックス色はプレビュー設定
背景色とボックス色は、シャドウが明るい面や色付きの面でどう見えるかを確認するためのものです。コピーされるスニペットには含まれず、生成された box-shadow 宣言だけが出力されます。
ぼかしは輪郭を柔らかくし、広がりは大きさを変える
位置、色、広がりを固定し、ぼかしを 0 から 20 px に上げると、くっきりした輪郭が滑らかな濃淡に変わります。次にぼかしを 0 に戻し、広がりを 0 から 10 px に上げると、輪郭はくっきりしたまま影が四方に大きくなります。CSS は広がりを適用してからぼかすため、影の範囲は広がりで、輪郭の柔らかさはぼかしで調整します。
負の広がりで外側の影を小さくする
内側の影をオフにし、水平位置を 0、垂直位置を 12 px、ぼかしを 16 px に設定して、広がりが 0 と -8 px の場合を比べてください。負の広がりは影を縮めてからぼかします。下方向の位置ずれと組み合わせると影の多くがボックスの背後に隠れ、下側に集中しますが、ほかの三辺から完全に消えるとは限りません。負の値が大きすぎると影が見えなくなることがあります。内側の影のスイッチは、効果をボックスの内側に切り替えるものです。
同じ種類の影では最初のレイヤーが最前面
外側の影が重なる場合、カンマ区切りのリストで最初の影が最前面に描画されます。このツールは表示順に出力し、新しいレイヤーを末尾に追加します。最初を小さくはっきりした影、次を広く柔らかい影に設定してみてください。二つ目が見えにくければ、最初の不透明度や広がりを下げます。内側の影は背景の上、外側の影はボックスの背後に描かれるため、順番を変えても外側の影が内側になるわけではありません。
よくある質問
このテーマに関するよくある疑問と回答をまとめました。
どのプロパティをカスタマイズできますか？
水平・垂直オフセット、ぼかし半径、広がり半径、シャドウカラー、インセットシャドウの切り替えをカスタマイズできます。
複数のシャドウを追加できますか？
はい、複数のシャドウレイヤーを重ねて複雑な奥行き効果を作成できます。各レイヤーに独立したオフセット、ぼかし、広がり、色を設定できます。
クロスブラウザ対応のコードを生成しますか？
はい、標準的な CSS box-shadow プロパティはベンダープレフィックスなしで、すべてのモダンブラウザで動作します。
データはサーバーに送信されますか？
いいえ、box-shadow CSSの生成はすべてブラウザ内で実行されます。シャドウ設定はJavaScriptでローカルに処理され、端末から外部に出ることはありません。