ボックスシャドウ生成ツール
無料のオンラインCSSボックスシャドウ生成ツール、リアルタイムプレビュー対応
CSS box-shadow 構文
box-shadow CSS プロパティは、要素の周囲にシャドウ効果を追加します。構文：box-shadow: [inset] offset-x offset-y blur spread color。複数のシャドウをコンマで区切ることができます。ビジュアルエディターを使用して値を調整し、結果をリアルタイムで確認します。
ボックスシャドウジェネレーターの使い方
オフセット X、オフセット Y、ブラー半径、スプレッド半径のスライダーを調整します。シャドウカラーを選択し、インセットオプションを切り替えます。生成された CSS コードはリアルタイムで更新され、クリップボードにコピーできます。
▶ブラーとスプレッドの違いは？
ブラーはシャドウエジの柔らかさを制御します（0 = シャープエッジ、値が大きいほど柔らかくなります）。スプレッドはすべての方向にシャドウを拡大または縮小します。正のスプレッドは要素よりも大きいシャドウを作成します。
▶複数のシャドウを追加できますか？
はい、CSS はコンマで区切られた複数のシャドウをサポートしています：box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.1);。よりリアルな奥行き効果のために、控えめなシャドウを組み合わせてください。
▶インセットシャドウは何をしますか？
インセットシャドウは、要素の外側ではなく内側に表示されます。要素が内側に押し込まれているような印象を作成します。テキストフィールドやボタンの押下のような感じです。
このツールがあなたに役立ったなら、私にコーヒーをご馳走することをお勧めします。
私にコーヒーを買ってください。