CSS Box Shadow ジェネレーター
影の付け方を見ながら、box-shadowのCSSを作ります。
無料・登録不要
プリセット
プレビュー
シャドウレイヤー（1）
CSS コピー
box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.1);
- inset: 内側影（凹み表現） / 外側影（凸表現）
- X: 水平方向のオフセット（+ で右、- で左）
- Y: 垂直方向のオフセット（+ で下、- で上）
- blur: ぼかし半径（大きいほど柔らかい）
- spread: 影の拡張（+ で大きく、- で小さく）
- 複数レイヤー: 「+ レイヤー追加」で重ねがけ可能。Neumorphism は凸 / 凹で 2 層使う
- 関連: カラーコード変換 / CSS グラデーション
使い方
- 1「プリセット」から近いものを選びます
- 2「プレビュー」を見ながら数値や色を調整します
- 3「CSS コピー」でコピーします
あわせて使えるツール
使い方と例文
CSS Box Shadow ジェネレーターの使い方
- 1テキストを入力またはペーストします
- 2「変換する」ボタンをクリックします
- 3結果を確認してコピーします
よくある質問
CSS Box Shadow ジェネレーターは無料ですか？
スマートフォンでも使えますか？
対応している画像形式は？
判断基準と失敗例
良いCSS Box Shadowの判断基準
カードやボタンの影をスライダー操作で作り、CSS をコピーできるツールです。プリセットから始めて微調整するのが近道ですが、コピーする前に下の基準で「影の強さと一貫性」を確認すると、ページ全体で影がばらばらになるのを防げます。
影が過剰になっていないか
ツール上で影を単体調整していると、つい濃く・大きくしがちです。影は「要素がわずかに浮いている」程度が基本で、不透明度は低めに抑えるのが一般的です。実ページに置いたとき悪目立ちしないかで判断します。
サイト内の他の影と階層が揃っているか
カード・ドロップダウン・モーダルなど、浮いている高さの違う要素には段階の付いた影を使うのが定石です。今作っている影が、既存の影のどの段階に当たるのかを確認し、同じ階層の要素とは同じ影を使い回します。
レイヤー数が必要以上に増えていないか
影は複数レイヤーを重ねると表現が豊かになりますが、レイヤーが多いほど描画の負荷は増える傾向があります。同じ影を多数の要素（一覧のカード全件など）に適用する場合は特に、少ないレイヤーで成立しないかを先に検討します。
ダークモードでの見え方を確認したか
暗い背景では黒い影がほとんど見えず、要素の浮きが伝わらなくなることがあります。ダークモード対応サイトでは、影の代わりに背景色の明度差で階層を表現するなど、モード別の設計が必要かを確認します。
影の色が背景と馴染んでいるか
純粋な黒の半透明だけでなく、背景色の暗い系統色を影に使うと馴染みやすいとされます。実ページの背景の上でプレビューし、影だけ灰色に浮いて見えないかを確認します。
コピーした CSS を実際のブラウザで確認したか
ツールのプレビュー領域と本番の要素ではサイズ・背景・隣接要素が違います。本番に入れる前に、実際のページに適用してブラウザで確認します。hover などの状態変化がある場合は、その状態でも表示を見ます。
ありがちな失敗例（NG → 改善）
NG要素ごとにその場の感覚で影を作り、ページ内に微妙に違う影が何種類も混在する。
改善影を2〜3段階（弱・中・強など）に決めて変数化し、同じ階層の要素には同じ影を使い回す。
影は要素の高さを表現する手がかりです。種類が無秩序に増えると、画面の階層構造が伝わらなくなります。
NG不透明度の高い大きな影で目立たせようとして、要素の周りが黒ずんで重い印象になる。
改善まず控えめな影で要素の浮きを表現し、強調が必要なら影以外の手段（色・サイズ・余白）も検討する。
影の役割は強調ではなく奥行きの表現です。濃すぎる影は紙面が汚れたような印象を与えます。
NGライトモードで調整した黒い影をダークモードでもそのまま使い、要素の区別がつかなくなる。
改善ダークモードでは影が見えにくくなる前提で、背景の明度差や境界線で階層を補う設計を確認する。
影は背景より暗いことで成立します。背景自体が暗いと影の効果が薄れるため、別の手がかりが必要になります。
くわしい説明
CSS box-shadow をビジュアルで作成。Card・Button・Neumorphism（凸/凹）・Glow など 6 プリセット + 複数レイヤー重ねがけ + リアルタイムプレビュー + CSS コピー。
影の数値合わせを CSS Box Shadow ジェネレーターの画面に任せる
Web デザイナー / フロントエンドエンジニアが「いい感じの影」を CSS で書く時、毎回数値調整に時間を取られます。本ツールは X / Y / blur / spread / color / opacity をビジュアル UI で調整 + リアルタイムプレビュー + ワンクリック CSS コピーで、影づくりを数十秒で完了させます。
【画面の並び】6つのプリセットボタン、プレビュー、レイヤーごとの入力欄（inset のチェック、x・y・blur・spread の数値、色、alpha）、CSS のコピー欄が縦に並びます。数値を変えるとプレビューと 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 + 半透明色 → 光る効果。色変更可。
Card（標準）の既定値のまま書き出した box-shadow の実処理結果
編集部で3パターン操作し、コピー欄に出た CSS をそのまま記録しました。処理はブラウザの中で完結し、検証中にサイトの AI 処理窓口へ送られた通信は1件もありませんでした。
【条件】画面を開いた直後（プリセットは Card（標準）、レイヤー1つ、色は黒、alpha は 0.1） 【出た CSS】box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.1);
並び順は、x（横のずれ）、y（縦のずれ）、blur（ぼかし）、spread（広がり）、色の5つです。0 の項目も省略されず 0px として書き出されます。色は、選んだ色と alpha を合わせて rgba() の形に変換されます。black や #000000 ではなく rgba(0, 0, 0, 0.1) で出るので、後から透明度だけ変えたいときは、この末尾の数字を触ることになります。
inset と負の spread、blur を 0 にしたときの実処理結果
崩れが出そうな2パターンも試しました。
【条件】inset にチェックを入れ、spread を -10 にする 【出た CSS】box-shadow: inset 0px 2px 8px -10px rgba(0, 0, 0, 0.1);
【条件】blur を 0 にする 【出た CSS】box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.1);
inset は先頭に足され、マイナスの spread はそのまま -10px として書き出されました。数値が空になる、単位が抜けるといった壊れた文字列にはなりません。blur が 0 のときも 0px として残るため、ぼかしの無い硬い影をそのまま使えます。ただしこれは今回試した3パターンで見えた範囲で、どの値の組み合わせでも整った CSS が出る保証ではありません。
入力欄に上限も下限も無い、このジェネレーターのクセ
【クセ1】x・y・blur・spread の入力欄には上限と下限が設定されていません。実装を確認した範囲でも、打った数値をそのまま受け取る作りでした。極端な値を入れたときの出力は今回試していないため断定はできませんが、止める仕組みが無い以上そのまま CSS に出ると考えられます（ここは推測です）。
【クセ2】alpha だけは 0 から 1 の範囲に収める処理が入っています。範囲の外を打っても内側に丸められます。
【クセ3】色は色選択の入力欄から選ぶ形なので、常に6桁の形式で渡ります。内部では6桁の形式だけを rgba() に変換する作りで、そこから外れた値が来たときは黒に置き換わります。今回の操作では色選択欄しか使えないため、この置き換えは起きませんでした。
弱点は、今回の3パターンでは出ませんでした。構造上の限界として、レイヤーを2つ以上重ねたときの書き出し（カンマでつながった複数行になります）は今回記録していません。プリセットの Neumorphism は凸も凹も2層構成なので、2層の CSS を見たいときはそのプリセットから始めるのが早いです。
blur・opacity・多重レイヤーで失敗しやすい5点と、向かない用途
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 だと光源が右下。
向かない用途は、印刷物やスライドの影づくりです。box-shadow はブラウザが描くための CSS の指定なので、Illustrator や PowerPoint にそのまま持ち込めません。文字に付ける影（text-shadow）もこの画面では作れません。書式は似ていますが spread を持たないなど仕様が違うため、別の方法で用意してください。
Tailwind のカードやボタン hover で影を作る場面
【1. Tailwind CSS / Vanilla CSS のカード設計】shadow-md だと物足りない時の カスタムシャドウ作成。
【2. Neumorphism UI 実装】凸 / 凹デザインは光源方向 + 明暗 2 層が必須。本ツールのプリセットでベース作成 → 微調整。
【3. ボタン hover / focus 状態】通常状態 + hover 状態の 2 つを別々に作成して transition で繋ぐ。
【4. デザインシステム整備】Card lv1 / Card lv2 / Card lv3 のシャドウバリエーションをトークン化。
この4つに共通するのは、1回作って終わりではなく同じ影を何度も使い回す点です。コピーした CSS を要素へ直に貼るのではなく、変数やクラスに一度置いてから使うと、後から一括で調整できます。
コピーした box-shadow を本番に貼る前に見る3点
貼る前に人が見るのは3点です。
1つ目は、本番と同じ背景色の上で見たかどうかです。プレビューの背景色は変えられるので、白のまま判断せず、実際の背景に近い色へ合わせてから決めます。
2つ目は、数値の桁を打ち間違えていないかです。上限が無いため、8px のつもりの 88px も警告なしで通ります。コピー欄の数字は、貼る前に目で読み直してください。
3つ目は、コピー欄の CSS が box-shadow: で始まり、末尾のセミコロンまで含まれているかです。レイヤーが複数あるときはカンマでつながります。
この3点を確認してから貼れば、影が消える・出過ぎるといった取り違えはかなり減らせます。なお今回の検証はプレビュー付きの画面上での記録なので、実際のページでの見え方は貼り付け先で必ず確かめてください。