📦 Box Shadow生成器

Box Shadow生成器について

このボックスシャドウ生成器は、すべてブラウザ内で完結します。水平・垂直オフセット、ぼかし半径、広がり半径、シャドウ色、不透明度、インセットオプションを調整して、完璧なシャドウを作成できます。生成されたCSSコードをプロジェクトに直接コピーできます。

Box-shadowプロパティの解説

• 水平オフセット —— 正の値でシャドウが右に、負の値で左に移動します。
• 垂直オフセット —— 正の値でシャドウが下に、負の値で上に移動します。
• ぼかし半径 —— 値が大きいほどシャドウがぼやけて柔らかくなります。0で鋭いエッジ。
• 広がり半径 —— 正の値でシャドウが拡大、負の値で縮小します。
• 色と不透明度 —— シャドウ色を設定し、透明度を制御します。
• インセット —— 有効にすると、シャドウが要素の外側ではなく内側に表示されます。

生成器の使い方

1. オフセット、ぼかし、広がり、不透明度のスライダーを調整します。
2. カラーピッカーでシャドウ色を選びます。
3. 内側のシャドウが必要な場合はインセットをオンにします。
4. プレビューボックスがリアルタイムで更新されます。
5. CSSをコピーをクリックして生成されたコードをコピーします。

よくある質問

複数のシャドウを使えますか？ 生成されたCSSは単一のシャドウを表示します。CSS内でカンマ区切りで複数のシャドウを手動で組み合わせることは可能です。

不透明度スライダーは色に影響しますか？ はい。不透明度は出力のRGBA形式でシャドウ色に適用されます。

box-shadowはどこでもサポートされていますか？ はい、box-shadowはモバイルを含むすべてのモダンブラウザでサポートされています。