box-shadowの数値をスライダーで調整しながら、影の重なりをその場で確認できます。多層の自然な影から、背景に溶け込むニューモーフィズムの陰影まで、CSSまたはTailwindクラスとして書き出せます。
陰影の設定
225度で左上からの光。影は反対側へ落ちます
均一な面が浮き上がる基本形
.shadow-element {
border-radius: 24px;
background: #e0e0e0;
box-shadow: 10px 10px 28px #9d9d9d, -10px -10px 28px #e9e9e9;
}box-shadow・CSS影の生成ツール（シャドウジェネレーター）とは？
本ツールは、CSSのbox-shadowをGUIで設計し、コードとして書き出せるジェネレーターです。横位置・縦位置・ぼかし・広がり・色・不透明度をスライダーで調整でき、複数のレイヤーを重ねた多層の影やinset（内側の影）にも対応しています。Tailwind CSSやMaterial Design相当のプリセットから始めて微調整することもできます。
もうひとつのモードがニューモーフィズム（Neumorphism）です。これは、写実的な立体表現とフラットデザインのミニマリズムを融合させたデザイン言語で、要素が背景を押し上げて出てきたような、あるいは指で押し込まれたような質感を生みます。光源の角度を指定すると明暗2つの影が自動計算され、Flat・Concave・Convex・Pressedの4形状を切り替えられます。影と背景のコントラスト比も同時に表示するため、視認性を確認しながら設計できます。
こんなシーンで便利です
カードやモーダルの影を詰める
薄い影を何層にも重ねる手法で、単層では出せない自然な奥行きを作れます。プリセットから始めて微調整できます。
入力欄やボタンのへこみ表現
insetを使った内側の影で、フォームの入力欄や押し込まれたボタンの状態を表現できます。
ニューモーフィズムUIの設計
スマートホームの操作画面やダッシュボードなど、物理的な手触りを感じさせるUIの陰影を数値で追い込めます。
ダークモード用の陰影調整
ベースカラーを暗い中間色に変えるだけで影の色が自動で再計算され、暗い画面でも破綻しない立体感を確認できます。
使い方は簡単 4ステップ
- 上部でモードを選びます。一般的な影なら「box-shadow（多重影）」、背景に溶け込む立体感なら「ニューモーフィズム」です。
- box-shadowモードでは、プリセットを選ぶかレイヤーを追加し、位置・ぼかし・広がり・色を調整します。
- ニューモーフィズムモードでは、ベースカラーを決めたうえで距離・ボケ・コントラスト・光源の角度を設定します。
- サイズや角の丸み、クラス名を整えたら、CSSまたはTailwindタブからコードをコピーします。
※「内文字」をONにすると、テキストにも陰影を施した場合の見え方を確認できます。ニューモーフィズムではtext-shadowのコードも一緒に書き出されます。
ご利用時の注意点
- 互換性：生成されるコードは box-shadow と background を使用した標準的なCSSです。Internet Explorerを除くすべてのモダンブラウザで動作します。
- 光源の角度：0度が右、90度が下（CSSの座標系）です。左上からの光を想定する場合は225度を指定してください。影は必ず光源の反対側へ落ちます。
- 影の色の計算：ベースカラーを白または黒へ混色して明暗2色を生成しています。純白や純黒をベースにすると片側の影がほぼ見えなくなるため、中間色（#e0e0e0、#2a2a2aなど）の使用を推奨します。
- 数値のバランス：ニューモーフィズムでは「ボケ ＝ 距離の約2倍」に設定すると最も自然に見えます。距離は要素サイズの2〜5%程度が目安です。
- サイズの出力：width / height は初期状態ではコードに含めません。実務では中身に応じて可変にすることが多いためで、必要な場合はチェックを入れてください。
box-shadowの設定値と、影の種類ごとの使い分け早見表
影の役割ごとに適した数値の目安です。本ツールのプリセットもこの考え方に基づいています。
| 影の種類・用途 | 推奨される設定 | 視覚的な効果と注意点 |
|---|---|---|
| 浅い影（ボタン・タグ） | 0 1px 3px / 不透明度 0.1 前後 | 要素をわずかに持ち上げ、押せることを示す |
| 標準の影（カード） | 0 4px 6px と 0 2px 4px の2層 | リスト内で要素を分離する。2層にすると自然 |
| 深い影（モーダル） | 0 25px 50px / 広がり -12px | 前面に浮かせる。広がりを負にして裾を締める |
| スムーズな影 | 1px→16px を薄く5層重ねる | 単層より柔らかく、現実の減衰に近い見え方 |
| 内側の影（inset） | inset 0 2px 6px / 不透明度 0.2 | 入力欄のへこみや押下状態の表現に使う |
| 発光（グロー） | 0 0 16px：位置0・ぼかしのみ | アクセント色で発光させる。多用は避ける |
| ニューモーフィズム | 距離14px / ボケ28px / 明暗2色 | 背景と同色が前提。コントラスト不足に注意 |
| 光源の角度 | 225度（左上から）が一般的 | サイト全体で角度を統一すると整合性が出る |
【影を自然に見せる3つの原則】
第一に、影は必ず光源の反対側へ落ちること。ページ内で光源の向きが要素ごとにばらつくと、無意識の違和感につながります。第二に、浮いている高さが増えるほど影は大きく薄くなること。距離を伸ばしたら、ぼかしを増やしつつ不透明度は下げてください。第三に、単層より多層の方が自然であること。現実の影は距離に応じて濃度が連続的に変化するため、薄い影を複数重ねる方が写実に近づきます。
【アクセシビリティと視認性】
影だけで境界を示すスタイルは、境界線（border）を使わないぶんコントラストが不足しがちです。とくにニューモーフィズムは背景と要素が同色のため、弱視の方には要素の存在自体が伝わらないことがあります。実務では、テキストのコントラスト比を4.5対1以上に保つ、押下状態への遷移アニメーションを用意する、重要な操作にはアクセントカラーを併用するといった配慮を組み合わせてください。
影の設計をプロダクト全体で破綻させないためのCSS実装とパフォーマンスの指針
単発のコード生成にとどまらず、デザインシステムへの組み込み、状態変化の設計、描画負荷の抑制までを含めた実務運用の考え方を整理します。
CSS変数で影を一元管理し、ダークモードとテーマ切替に耐える設計にする
影の値を各コンポーネントへ直接書き込むと、ダークモード対応やブランド刷新のたびに修正箇所が散らばります。:root に --shadow-sm、--shadow-md、--shadow-lg といった段階（エレベーション）としてのカスタムプロパティを定義し、各コンポーネントはその変数だけを参照する構成にしてください。ダークモードでは同じ変数に対して不透明度を上げた別の値を割り当てれば、切替に強い設計になります。暗い背景では黒い影が見えにくいため、明度そのものを調整する必要があります。
状態に応じた影の変化で、押せる要素であることをコードから伝える
ボタンやカードは、通常・ホバー・アクティブ・非活性の4状態で影を設計すると操作感が大きく向上します。150〜300ミリ秒のトランジションで滑らかに遷移させ、ホバーでは距離とぼかしを広げて浮き上がりを、アクティブでは距離をほぼゼロにして沈み込みを表現します。
ニューモーフィズムでは、FlatからPressedへの切り替えがそのまま押下表現になります。非活性状態では影を消して平坦にすると、操作できないことが視覚的に伝わります。
box-shadowの重ねすぎによる描画負荷と、一覧画面での回避策
box-shadowはぼかし半径が大きいほど描画コストが上がり、多層の影を数十件のリスト要素へ一斉に適用するとスクロールがカクつく原因になります。とくに低スペック端末やスマートフォンで顕著です。
対策は、一覧では影の層数を1〜2層に抑え、多層の表現は詳細画面やモーダルなど画面内で数が限られる要素に限定すること。アニメーションさせる場合も、box-shadow自体を変化させるより、影を持つ擬似要素の opacity を変化させる方が軽量に済みます。
デザインツールとブラウザで影の見え方がずれる原因と、実機での確認
Figmaなどで作成したエフェクトと、ブラウザでレンダリングされたbox-shadowでは、ぼかしの解釈やカラープロファイルの違いから見え方に差が生じます。数値をそのまま移植して「なぜか薄く見える」現象の多くはこれが原因です。
モックアップの数値を絶対視せず、本ツールのプレビューで実ブラウザ上の描画を確認しながら不透明度を微調整してください。加えて、影は表示環境の明るさに強く影響されるため、実機かつ想定される環境光の下で最終確認を行うことが確実です。
CSSの影の設計でよくある失敗と対策
コントラスト不足で、影だけでは要素の境界が認識できなくなる失敗
ニューモーフィズムの原則である「背景色と要素の色を同一にする」をそのまま適用した結果、境界線も色の差もなくなり、弱視の方や屋外の直射日光下では要素の存在自体が認識できなくなるケースです。押せるのか、単なる装飾なのかも判別できず、操作の手がかりが失われます。
💡 対策・解決策を見る▼
光源の向きが要素ごとにばらつき、画面全体が不自然に見える失敗
コンポーネントごとに影のオフセットを手作業で決めていくと、ある要素は右下に、別の要素は左下に影が落ちるといった不整合が生まれます。個々を見ると気づきにくい一方で、画面全体では説明しづらい違和感として蓄積し、完成度が低く見える原因になります。
💡 対策・解決策を見る▼
純白や純黒をベースにして、片側の影が消えて立体感が失われる失敗
ダークモードで純黒を、ライトモードで純白を背景に指定した結果、ベースよりさらに暗い影、あるいはさらに明るい影が作れず、陰影が片側しか出ないケースです。結果として立体感が消え、ただのフラットな面になってしまいます。
💡 対策・解決策を見る▼
多層の影を一覧全体へ適用し、スクロールがカクつく失敗
薄い影を5層重ねる手法は見た目が自然になる一方、描画コストが層数とぼかし半径に比例して増加します。これをカードが数十件並ぶ一覧ページへ一斉に適用すると、とくにスマートフォンでスクロールのフレーム落ちが発生します。
💡 対策・解決策を見る▼
よくある質問（FAQ）
Q.複数のbox-shadowを重ねた多層の影も作成できますか
A. できます。box-shadowモードではレイヤーを自由に追加・削除でき、それぞれに横位置、縦位置、ぼかし、広がり、色、不透明度、内側か外側かを個別に設定できます。カンマ区切りで連結された1行のbox-shadow値として書き出されるため、そのまま貼り付けて利用できます。影を薄く何層にも重ねる手法は、単層の影より自然で奥行きのある表現になります。
Q.ニューモーフィズムの基本ルールは何ですか
A. 背景色と要素の色を完全に同じにすることが基本です。そのうえで、ベースカラーよりわずかに明るい影とわずかに暗い影を対角線上に配置することで、背景から滑らかに浮き上がる立体感を表現します。本ツールでは光源の角度を指定すると、その反対側へ暗い影、光源側へ明るい影が自動的に配置されます。左上からの光を想定する場合は225度が標準的です。
Q.insetを使った内側の影はどのような場面で使いますか
A. 入力欄のへこみ、押し込まれたボタン、カードの中に埋め込まれたような領域の表現に使います。box-shadowモードで各レイヤーのinsetを有効にすると、影が要素の内側へ描画されます。ニューモーフィズムではPressedを選ぶと同様に内側の陰影となり、ボタンが押された状態の表現に利用できます。
Q.アクセシビリティ上の注意点はありますか
A. 影だけで要素の境界を表現すると、コントラストが不足しやすくなります。特にニューモーフィズムは背景と要素が同色のため、弱視の方や屋外の明るい環境では要素そのものを認識できない場合があります。本ツールは影と背景の明暗差をコントラスト比として表示し、低すぎる場合は警告します。重要なボタンにはアクセントカラーや枠線、アイコンを併用して視認性を補ってください。
Q.商用プロジェクトで生成したCSSをそのまま使えますか
A. はい。本ツールが生成するのは標準的なbox-shadowとbackgroundの組み合わせであり、特定のライブラリに依存しません。商用利用を含めあらゆるプロジェクトで、クレジット表記なしに自由に組み込んでいただけます。Tailwind CSSを利用している場合は、任意の値を用いたクラス文字列としても書き出せます。
Q.入力したカラーや設定値がサーバーに保存されることはありますか
A. ありません。本ツールは完全ローカル処理型の設計です。カラーコード、影の数値、クラス名などのすべてのデータはお使いのブラウザ内だけで処理され、外部サーバーへの送信もデータベースへの保存も行われません。公開前のプロダクトの配色を扱う場合でも安全にご利用いただけます。
あなたの声で、
このツールをより鋭く。
「こんな機能が欲しい」「ここを直してほしい」といったご意見や、新しいツールのリクエストを募集しています。エンジニアが直接目を通し、開発の参考にさせていただきます。