Box Shadow Generator
Box Shadow Generator — ブラウザで動作します。入力は保存されません。
ボックスシャドウ生成
値を入力してから「計算する」を押してください。
プレビュー
スライダーを動かすとbox-shadowのCSSがすぐに更新されます。
使い方
- XオフセットとYオフセットのスライダーまたは数字で影の位置を決めます。初期はX 0、Y 8です。
- BlurとSpreadでぼかしと広がりを調節します。初期blurは24です。
- 影の色と不透明度スライダーを合わせます。不透明度パーセントが横に表示されます。
- 内側の影が必要ならinsetをオンにします。プレビューボックスですぐ確認します。
- 下のCSSをコピーしてスタイルシートに貼ります。リセットで初期値に戻ります。
ポイント
ボックスシャドウ生成ツールはカードUI、ボタン、モーダルに使うbox-shadowを数字で調えるときに使います。X・Yは影がどれだけずれるか、blurは端の柔らかさ、spreadは影の面積です。色とアルファを一緒にすると灰色の影ではなくブランド色の影も作れます。スライダーを動かすとすぐCSSが更新されます。
insetをオンにすると影がボックスの内側に入り、押された入力欄や内側の陰影に合います。プレビューは白い丸角の四角なので明るい背景基準です。生成はブラウザーでだけ行われます。複数層の影はこの画面で1レイヤーだけ作るので、重ねるならコピーした値をカンマでつなぎます。
例
初期値Y 8、blur 24、不透明度25%なら柔らかい下側の影が出ます。Xを12、Yを12に上げると右下の影が濃くなり、insetをオンにすると同じ値が内側の陰影に変わります。コピーしたCSSをセレクタの中にそのまま貼ればよいです。カードリストは同じ影を繰り返して階層を合わせ、モーダルだけより大きいblurを付けることが多いです。暗い背景ではアルファを少し上げないと影が見えないので、プレビューの白いボックスと違うことがあります。コピーした宣言をメディアクエリの中に入れると、モバイルでspreadを減らす調整もできます。同じ入力を何度も試すときはリセット後に新しく貼り、前の出力と混ざらないようにします。共用パソコンなら作業後に入力欄を空にし、原文がモニターに残らないようにしてください。ブラウザーのタブを閉じると今貼った値も消え、サーバーに削除依頼を送る必要はありません。
関連: グラデーション生成ツール · カラーピッカー
よくある質問
ボックスシャドウCSSでinsetはいつ使いますか？
内側の影です。カード内側の陰影や押されたボタンの感じに使います。
box-shadow生成値はサーバーに行きますか？
いいえ。ブラウザーでだけプレビューし文字列を作ります。
複数層の影も作れますか？
1レイヤーだけ作ります。複数層はコピーした宣言をカンマでつないでください。
不透明度はどこに入りますか？
色のアルファに入ります。スライダー横のパーセントを見ればよいです。
spreadとblurの違いは何ですか？
blurは端をぼかし、spreadは影の大きさを増減します。
プレビューの背景色を変えられますか？
プレビューは白いボックス固定です。実際のページ背景でもう一度確認してください。
最終確認日: 2026-09-04