CSSボックスシャドウ生成器

概要 CSSボックスシャドウ生成器?

CSS box-shadowプロパティをビジュアルインターフェースで作成・カスタマイズするツールです。オフセット、ブラー、スプレッド、色、透明度を調整して、微妙な奥行きからドラマチックな浮遊効果まであらゆるシャドウ効果を実現できます。

使い方

1. 水平/垂直オフセットスライダーを調整してください
2. ブラー半径（ぼかし具合）とスプレッド半径（サイズ）を設定してください
3. 影の色と透明度を選択してください
4. insetで内側の影を切り替え、生成されたCSSをコピーしてください

計算式

よくある質問

1つの要素に複数の影を適用できますか？

はい、CSSで複数の影の値をカンマで区切ります。影を重ねることでリアルな奥行き効果を作成できます。

insetシャドウとは？

insetシャドウは要素の外側ではなく内側に表示され、押されたボタンやくぼんだ見た目を作成します。box-shadow値に'inset'キーワードを追加します。

スプレッド半径とブラー半径の違いは？

ブラーは影を柔らかく大きくします。スプレッドは影のシャープさに影響せず、サイズを拡大・縮小します。負のスプレッドは影を要素より小さくします。