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

CSSボックスシャドウ生成について

box-shadow CSSプロパティは要素の枠線周りにシャドウ効果を追加します。複数の効果をカンマ区切りで設定でき、それぞれは2〜4個の長さ値（水平オフセット、垂直オフセット、ぼかし半径、拡散半径）、任意の色、任意のinsetキーワードで定義されます。本ジェネレーターでリアルタイムコントロールにより完璧なシャドウを作り、即座にコピーできます。

コントロール可能なプロパティ

• 水平オフセット —— 正の値でシャドウが右に、負の値で左に移動します。
• 垂直オフセット —— 正の値でシャドウが下に、負の値で上に移動します。
• ぼかし半径 —— 値が大きいほどぼかしが大きく柔らかくなります。
• 拡散半径 —— 正の値でシャドウが拡大、負の値で縮小します。
• 色と不透明度 —— 任意の色を選び透明度を調整できます。
• インセット —— 外側ではなく要素の内側にシャドウをレンダリングします。

使い方

1. オフセットスライダーをドラッグしてシャドウを配置します。
2. ぼかしと拡散を調整して柔かさとサイズを決めます。
3. 色を選び不透明度を調整します。
4. 必要に応じてインセットをオンにします。
5. CSSをコピーをクリックしてスタイルシートに貼り付けます。

よくある質問

複数のシャドウを重ねられますか？ ジェネレーターは分かりやすさのため単一シャドウを出力しますが、コピーした複数の値をカンマ区切りで貼り付けて重ねることができます。

シャドウが見えないのはなぜ？ 不透明度0%や、ぼかし/拡散0で要素と同じ色の場合、見えない場合があります。不透明度やぼかしを上げるとシャドウが見えるようになります。

古いブラウザで動作しますか？ box-shadow はすべてのモダンブラウザでサポートされています。非常に古いブラウザでは -webkit- プレフィックスが必要な場合があり、手動で追加できます。