CSSボックスシャドウ ジェネレーター

使い方

1. 水平・垂直オフセットを調整して影の位置を設定します。
2. ぼかし半径で柔らかさを、広がり半径でサイズを設定します。
3. 色を選択し、不透明度を調整します。
4. 内側の影にするにはinsetをオンにします。
5. コピーボタンで生成されたCSSをコピーできます。

CSSボックスシャドウとは

CSSのbox-shadowプロパティは、要素のフレームの周囲に影の効果を追加します。オフセット、ぼかし半径、広がり半径、色、内側の影などを設定できます。カード、ボタン、モーダルなど、視覚的な奥行きや立体感が必要な要素に広く使われています。

値のリファレンス

• 水平オフセット：正の値は影を右に、負の値は左に移動します。
• 垂直オフセット：正の値は影を下に、負の値は上に移動します。
• ぼかし半径：値が大きいほど柔らかく拡散した影になります。0は鮮明なエッジです。
• 広がり半径：正の値は影を拡大し、負の値は縮小します。
• 内側の影（inset）：影を要素の内側に移動し、押し込まれた見た目を作ります。

プライバシー

すべての処理はブラウザ内で完結します。データがサーバーに送信されることはありません。