CSS Box Shadow ジェネレーター無料・登録不要
CSS box-shadow をビジュアルで作成。Card・Button・Neumorphism（凸/凹）・Glow など 6 プリセット + 複数レイヤー重ねがけ + リアルタイムプレビュー + CSS コピー。
プリセット
プレビュー
シャドウレイヤー（1）
CSS コピー
box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.1);
- inset: 内側影（凹み表現） / 外側影（凸表現）
- X: 水平方向のオフセット（+ で右、- で左）
- Y: 垂直方向のオフセット（+ で下、- で上）
- blur: ぼかし半径（大きいほど柔らかい）
- spread: 影の拡張（+ で大きく、- で小さく）
- 複数レイヤー: 「+ レイヤー追加」で重ねがけ可能。Neumorphism は凸 / 凹で 2 層使う
- 関連: カラーコード変換 / CSS グラデーション
良いCSS Box Shadowの判断基準
カードやボタンの影をスライダー操作で作り、CSS をコピーできるツールです。プリセットから始めて微調整するのが近道ですが、コピーする前に下の基準で「影の強さと一貫性」を確認すると、ページ全体で影がばらばらになるのを防げます。
影が過剰になっていないか
ツール上で影を単体調整していると、つい濃く・大きくしがちです。影は「要素がわずかに浮いている」程度が基本で、不透明度は低めに抑えるのが一般的です。実ページに置いたとき悪目立ちしないかで判断します。
サイト内の他の影と階層が揃っているか
カード・ドロップダウン・モーダルなど、浮いている高さの違う要素には段階の付いた影を使うのが定石です。今作っている影が、既存の影のどの段階に当たるのかを確認し、同じ階層の要素とは同じ影を使い回します。
レイヤー数が必要以上に増えていないか
影は複数レイヤーを重ねると表現が豊かになりますが、レイヤーが多いほど描画の負荷は増える傾向があります。同じ影を多数の要素（一覧のカード全件など）に適用する場合は特に、少ないレイヤーで成立しないかを先に検討します。
ダークモードでの見え方を確認したか
暗い背景では黒い影がほとんど見えず、要素の浮きが伝わらなくなることがあります。ダークモード対応サイトでは、影の代わりに背景色の明度差で階層を表現するなど、モード別の設計が必要かを確認します。
影の色が背景と馴染んでいるか
純粋な黒の半透明だけでなく、背景色の暗い系統色を影に使うと馴染みやすいとされます。実ページの背景の上でプレビューし、影だけ灰色に浮いて見えないかを確認します。
コピーした CSS を実際のブラウザで確認したか
ツールのプレビュー領域と本番の要素ではサイズ・背景・隣接要素が違います。本番に入れる前に、実際のページに適用してブラウザで確認します。hover などの状態変化がある場合は、その状態も含めて確認します。
ありがちな失敗例（NG → 改善）
NG要素ごとにその場の感覚で影を作り、ページ内に微妙に違う影が何種類も混在する。
改善影を2〜3段階（弱・中・強など）に決めて変数化し、同じ階層の要素には同じ影を使い回す。
→ 影は要素の高さを表現する手がかりです。種類が無秩序に増えると、画面の階層構造が伝わらなくなります。
NG不透明度の高い大きな影で目立たせようとして、要素の周りが黒ずんで重い印象になる。
改善まず控えめな影で要素の浮きを表現し、強調が必要なら影以外の手段（色・サイズ・余白）も検討する。
→ 影の役割は強調ではなく奥行きの表現です。濃すぎる影は紙面が汚れたような印象を与えます。
NGライトモードで調整した黒い影をダークモードでもそのまま使い、要素の区別がつかなくなる。
改善ダークモードでは影が見えにくくなる前提で、背景の明度差や境界線で階層を補う設計を確認する。
→ 影は背景より暗いことで成立します。背景自体が暗いと影の効果が薄れるため、別の手がかりが必要になります。
CSS Box Shadow ジェネレーターの使い方
- 1テキストを入力またはペーストします
- 2「変換する」ボタンをクリックします
- 3結果を確認してコピーします
よくある質問
CSS Box Shadow ジェネレーターは無料ですか？
はい、完全無料でご利用いただけます。会員登録も不要です。
スマートフォンでも使えますか？
はい、スマートフォン・タブレット・PCなど、ブラウザがあればどのデバイスでもご利用いただけます。
対応している画像形式は？
PNG、JPG、WebP、GIF、SVG形式に対応しています。
関連ツール
CSS Box Shadow ジェネレーターについて
CSS Box Shadow ジェネレーターが解決する課題
Web デザイナー / フロントエンドエンジニアが「いい感じの影」を CSS で書く時、毎回数値調整に時間を取られます。本ツールは X / Y / blur / spread / color / opacity をビジュアル UI で調整 + リアルタイムプレビュー + ワンクリック CSS コピーで、影づくりを数十秒で完了させます。
6 プリセット
【Card（標準）】y=2 / blur=8 / 10% 黒 → 一般的なカードシャドウ。 【Card（強め）】y=10 / blur=25 / spread=-5 → 浮き上がる印象。 【Button hover】y=4 / blur=12 / 20% 黒 → ホバー時の浮き感。 【Neumorphism（凸）】凸感は明 + 暗 2 層シャドウ → グレー系 UI で流行のスタイル。 【Neumorphism（凹）】凹感は inset で明 + 暗 2 層。 【Glow（青）】blur 大 + spread + 半透明色 → 光る効果。色変更可。
こんなシーンで使えます
【1. Tailwind CSS / Vanilla CSS のカード設計】shadow-md だと物足りない時の カスタムシャドウ作成。
【2. Neumorphism UI 実装】凸 / 凹デザインは光源方向 + 明暗 2 層が必須。本ツールのプリセットでベース作成 → 微調整。
【3. ボタン hover / focus 状態】通常状態 + hover 状態の 2 つを別々に作成して transition で繋ぐ。
【4. デザインシステム整備】Card lv1 / Card lv2 / Card lv3 のシャドウバリエーションをトークン化。
よくある失敗と注意点
1つ目: blur が大きすぎ → ぼやけ過ぎて影として認識されない。blur 4-25px が標準範囲。
2つ目: opacity 1.0 → 真っ黒で重い印象。0.1-0.25 が標準（夜間モードは 0.3-0.5）。
3つ目: 多重シャドウのパフォーマンス → 4 層以上はモバイル端末で描画コスト大。3 層までが推奨。
4つ目: 影の色を黒以外に → 背景色と統一感を出すため、影色は「背景の暗い系統色（紺・濃グレー）」を使うと自然。
5つ目: inset の方向 → inset は影が「物体の内側」に入る。x=-5 y=-5 だと光源が左上、x=5 y=5 だと光源が右下。