CSSボックスシャドウビルダーとは
box-shadowは、要素に奥行きと浮き上がり効果を追加する最も一般的なCSSプロパティの1つですが、特にオフセット、ブラー、スプレッド、カラー、insetキーワードを組み合わせる場合、その複数値の構文は混乱しがちです。このツールは、各値を調整するたびにライブプレビューを表示してプロパティを視覚化するため、スタイルシートに追加する前にシャドウがどのように動作するかを正確に確認できます。
クイックアンサー
オフセット、ブラー、スプレッド、カラー、insetを調整してbox-shadow宣言を生成します。ライブプレビューが静的なdivにシャドウを表示するため、スタイルシートに追加する前に値を調整できます。
Last updated: 2026-06-11
制限事項
- プレビューは周囲のコンテキストのない静的なdivです。単独では正しく見えるシャドウも、実際のページ背景や他の要素の近くでは異なって見えることがあります。
- ツールは一度に1つのシャドウを生成します。レイヤーまたは複数のシャドウの場合は、スタイルシートで手動で値を組み合わせる必要があります。
- box-shadowプロパティは要素のCSSボックスに従うシャドウを作成しますが、表示される形状には従いません。透明な背景やCSS clip-path形状を持つ非矩形要素の場合は、表示される輪郭に沿ったシャドウを得るためにdrop-shadowフィルターを使用します。
Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub
使い方
- 水平および垂直のオフセットを調整してシャドウの位置を変更します。
- ブラー半径とスプレッドを設定して、柔らかさとサイズを制御します。
- シャドウカラーを選択し、シャドウを要素の内側に表示する場合はinsetを切り替えます。
- 生成されたCSS宣言をコピーしてスタイルシートに貼り付けます。
主な用途
- カード、モーダル、ドロップダウンメニューに微妙な浮き上がり効果を追加する。
- ボタンやフォームフィールドにインセットの押し込み効果を作成する。
- 複数のbox-shadow値を組み合わせたレイヤーシャドウでリアルな奥行きを表現する。