CSS ボックスシャドウ生成ツール
リアルタイムプレビューでCSSボックスシャドウを視覚的に作成。複数シャドウレイヤー、インセットシャドウ、完全カスタマイズに対応。
ボックスカラー
ボーダー半径12px
シャドウレイヤー
レイヤー 1
X オフセット5px
Y オフセット5px
ぼかし15px
拡散0px
カラー
不透明度35%
CSSコード
オンラインでCSSボックスシャドウを作成する方法
- 1.スライダーでシャドウのオフセット（XとY）、ぼかし半径、拡散半径を調整します。
- 2.シャドウの色を選び、不透明度を調整して望む効果を得ます。
- 3.インセットを切り替えて内部シャドウを作成。+ レイヤー追加で複数シャドウを重ねます。
- 4.リアルタイムで変化をプレビューし、CSSをコピーをクリックしてプロジェクトで使用。
よくある質問
box-shadowの値とは？
CSS box-shadowプロパティは、offset-x、offset-y、blur-radius、spread-radius、colorを受け取ります。オプションで"inset"キーワードを追加して内部シャドウを作成できます。例：box-shadow: 5px 5px 15px 0px rgba(0,0,0,0.35);
複数のボックスシャドウを使用できますか？
はい！CSSはカンマで区切られた複数のボックスシャドウをサポートしています。このツールでは複数のシャドウレイヤーを追加して重ね合わせ、複雑なシャドウ効果を作成できます。
ぼかしと拡散の違いは？
ぼかし半径はシャドウのぼかし度を制御します（大きいほど柔らかい）。拡散半径はシャドウのサイズを拡大または縮小します。正の拡散はシャドウを大きく、負の拡散は要素より小さくします。
インセットシャドウとは？
インセットシャドウは要素の外側ではなく内側に表示されます。押し込まれた、または埋め込まれた効果を作成します。任意のシャドウレイヤーで"インセット"チェックボックスを切り替えて内部シャドウにします。