CSS ボックスシャドウ ジェネレーター
無料のオンラインCSSボックスシャドウジェネレーター。リアルタイムプレビューで複雑なレイヤーシャドウを作成します。
CSS ボックスシャドウ ジェネレーター
無料のオンラインCSSボックスシャドウジェネレーター。リアルタイムプレビューで複雑なレイヤーシャドウを作成します。
CSS box-shadow について
カンマ区切りのシャドウレイヤーを作成
各レイヤーは、任意の inset、水平オフセット、垂直オフセット、ぼかし半径、広がり半径、色を持つ 1 つの box-shadow 値になります。複数レイヤーは同じ宣言内で結合され、標準 CSS box-shadow 構文に沿います。
ボックス色はプレビュー設定
背景色とボックス色は、シャドウが明るい面や色付きの面でどう見えるかを確認するためのものです。コピーされるスニペットには含まれず、生成された box-shadow 宣言だけが出力されます。
よくある質問
このテーマに関するよくある疑問と回答をまとめました。
どのプロパティをカスタマイズできますか？
水平・垂直オフセット、ぼかし半径、広がり半径、シャドウカラー、インセットシャドウの切り替えをカスタマイズできます。
複数のシャドウを追加できますか？
はい、複数のシャドウレイヤーを重ねて複雑な奥行き効果を作成できます。各レイヤーに独立したオフセット、ぼかし、広がり、色を設定できます。
クロスブラウザ対応のコードを生成しますか？
はい、標準的な CSS box-shadow プロパティはベンダープレフィックスなしで、すべてのモダンブラウザで動作します。
データはサーバーに送信されますか？
いいえ、box-shadow CSSの生成はすべてブラウザ内で実行されます。シャドウ設定はJavaScriptでローカルに処理され、端末から外部に出ることはありません。