🌓 CSSボックスシャドウ生成
CSS
box-shadow: 4px 4px 12px 0px rgba(26, 58, 92, 0.35);
水平・垂直オフセット、ぼかし半径、広がり半径、色、透明度をスライダーで調整しながら、box-shadowのCSSコードをリアルタイムプレビュー付きで生成できるツールです。内側の影(inset)にも対応しています。カード型UIやボタンのデザイン作成に便利です。
使い方
- 各スライダーで水平・垂直オフセット、ぼかし、広がりを調整します。
- 色と透明度を選び、必要に応じて「内側の影」にチェックを入れます。
- プレビューを見ながら調整し、生成されたCSSコードを「コピー」でコピーします。
よくある質問
複数の影を重ねることはできますか?
いいえ。現在のバージョンは1つの影の生成のみに対応しています。複数の影が必要な場合は、生成したコードをカンマ区切りで手動で結合してください。
「広がり半径」とは何ですか?
影のサイズを拡大・縮小するパラメータです。正の値で影が大きくなり、負の値で影が小さくなります。
「内側の影」とは何ですか?
insetキーワードを付けると、要素の外側ではなく内側に影が表示されるようになります。凹んだような見た目を作る際に使います。