CSS Box Shadow ジェネレーター

スライダーで box-shadow を視覚的に調整。複数レイヤー対応、inset 切替、リアルタイムプレビュー、ワンクリックで CSS コピー。

完全無料登録不要ブラウザ完結 5 言語対応ダークモード

シャドウレイヤー

プレビュー

背景要素角丸 12px

CSS

プリセット

📖 つまずきやすいポイント

スライダーで box-shadow を組み立て、複数レイヤーを重ねて CSS を書き出します。処理はすべてブラウザ内で完結します。プレビューはあなたが今使っているブラウザの描画そのものなので、他のブラウザや OS では、ぼかしの階調がわずかに違って見えることがあります。ピクセル単位で厳密に一致させたい場合は、実機で確認してください。

ケース	何が起きるか	どうする
blur と spread を取り違える	blur はぼかしの幅、spread は影そのものの拡大縮小です。spread を上げると影が要素より大きくなり、輪郭がはっきりしたまま外へ広がるので、狙いより重たく見えます。	自然な影は blur を大きめに、spread はむしろ負の値にすると得られます。`0 4px 12px -2px rgba(0,0,0,.15)` のように、少し内側に縮めてからぼかすと、要素の直下から柔らかく立ち上がります。
影付きの要素を動かすと重い	`box-shadow` の値そのものをトランジションさせると、ぼかしをフレームごとに描き直すことになります。カード一覧のホバーのように同時に何枚も動く場面では、これだけで目に見えて重くなります。	影を `::after` 擬似要素に置き、`opacity` だけをトランジションさせます。opacity と transform は合成レイヤーで処理されるためレイアウトも再描画も発生しません。`will-change` はレイヤーを増やしてメモリを食うので、実際に問題が出た要素にだけ付けてください。
影だけが浮いて見える	黒 1 枚を濃く敷いた影は、現実の影の見え方と違います。実際の影は光源から遠いほど広く薄くなり、周囲の色をわずかに拾います。単色・単層だと、要素が背景から切り抜かれて貼られたように見えます。	薄い影を 2〜3 枚重ねます。近く小さくやや濃いもの (`0 1px 2px rgba(0,0,0,.10)`) と、遠く大きく薄いもの (`0 8px 24px rgba(0,0,0,.08)`) の組み合わせが定番です。色は真っ黒ではなく、背景の色相を少し混ぜると馴染みます。Material Design も Apple の HIG も、この重ね方を採っています。

box-shadow は要素のボックス (角丸を含む) の形にしか影を落としません。透過 PNG のロゴや SVG のアイコンに影を付けたい場合、四角い影が出てしまうので filter: drop-shadow() を使ってください。こちらはアルファチャンネルの形に沿います。ただし drop-shadow は spread を持たず、複数指定するとフィルターが連鎖して負荷が上がるので、用途で使い分けるのが実際的です。

📖 使い方

1

スライダーで影を調整

X / Y / blur / spread / 色 / 不透明度を直感的に変更
2

レイヤーを追加

「+ 追加」で複数レイヤーを重ねる。CSS は自動でカンマ区切り
3

CSS をコピー

生成された box-shadow をワンクリックでコピー

❓ よくある質問

どこに貼ればいい？

CSS の任意のセレクタ内に。例: .card { box-shadow: ... }

inset とは？

影を要素の内側に向けて描画。へこんだボタン風に使える

複数の影を組み合わせる意味は？

柔らかい近影と長い遠影を重ねるとリアルな立体感が出る (Material Design / Apple HIG が常用)

🐛 このツールで問題が発生しましたか？

完全無料・登録不要。再現手順だけでも結構です。届いたご報告は運営者に直接届き、修正の参考にします。