デザイン

ボックスシャドウジェネレーター

ブラウザ上で CSS の box-shadow を視覚的に調整します。各シャドウのレイヤーごとに水平と垂直のオフセット、ぼかし、広がり、色、不透明度を設定でき、複数のレイヤーを重ねることで、単一のシャドウでは出しにくい柔らかく立体的な奥行きを作れます。内側シャドウ、色付きの発光、輪郭のはっきりしたオフセットシャドウも同じパネルで扱え、プレビューは明るい背景と暗い背景を切り替えられ、角丸を調整して実際のコンポーネントに近づけられます。出力はそのままコピーできる CSS で、すべての計算はローカルで行われるため、デザインがブラウザの外に出ることはありません。

  • レイヤーごとにオフセット、ぼかし、広がり、色、不透明度を制御し、リアルタイムにプレビューできます
  • 複数のシャドウを重ねて、平らな影ではなく柔らかく立体的な奥行きを作れます
  • 内側シャドウ、色付きの発光、フォーカスリング、輪郭の硬いオフセットシャドウを同じ操作で扱えます
  • プレビューは明暗の背景を切り替えられ、角丸も調整してコンポーネントの形に合わせられます
  • 出力はそのままコピーできる CSS で、すべてブラウザ内で計算され、作業内容はアップロードされません
工具/ボックスシャドウジェネレーター
1 レイヤー
水平オフセット0px
垂直オフセット8px
ぼかし24px
広がり-4px
不透明度18%
box-shadow
16px
box-shadow: 0px 8px 24px -4px rgba(15, 23, 42, 0.18);
クイック操作

概要

box-shadow のすべてのパラメータを一つのパネルにまとめ、スタイルシート上でピクセル値を推測するのではなく、実際の背景の上で奥行きを確認できます。仕上がったら、その CSS をそのままプロジェクトに戻せます。

  1. 01

    レイヤーごとの細かな制御

    各レイヤーが独自のオフセット、ぼかし、広がり、色、不透明度を持つため、固定プリセットを微調整するのではなく、影の向きと柔らかさを正確に決められます。

  2. 02

    重ねて作る立体的な奥行き

    複数のレイヤーを重ねると、光の実際の減衰を再現できます。近くの締まった影と広い環境光の影が組み合わさり、一つの宣言では届かない奥行きになります。

  3. 03

    内側シャドウと発光を同じパネルで

    どのレイヤーも内側に切り替えれば、押し込んだ窪みや入力欄を表現できます。ぼかしと色を外側に広げれば、フォーカスリングやネオンの発光になり、ツールを切り替える必要はありません。

  4. 04

    明暗どちらの背景でもプレビュー

    プレビューは明るい背景と暗い背景を切り替えられます。同じ影でもクリーム色とほぼ黒の背景では見え方が大きく違うため、別々に確認できます。

  5. 05

    合わせられる角丸と要素の色

    プレビュー要素の角丸と色を調整し、影をカード、ボタン、モーダルに近い形の上で判断できます。無関係な四角ではなく、実際の形に近づけられます。

  6. 06

    厳選した出発点のプリセット

    プリセットは控えめな浮き上がり、重ねたカード、マテリアルの段階、フォーカスリング、ブランドの発光、硬いオフセットなどを網羅し、適用してから微調整できます。

使い方

一つのパネルで、おおまかなイメージから本番で使える CSS まで進められます。デザインファイルに合わせる場合も、ゼロから奥行きを描く場合にも使えます。

  1. 01

    目指す奥行きに近いプリセットを選ぶか、初期状態の単一レイヤーから始めます。

  2. 02

    最初のレイヤーのオフセット、ぼかし、広がりを、向きと柔らかさが合うまで設定します。

  3. 03

    色と不透明度を調整します。自然な影の多くは、純黒ではなく低い不透明度の暗い色です。

  4. 04

    より豊かな奥行きにはレイヤーを追加し、窪みや押し込み、内側の縁には内側シャドウに切り替えます。

  5. 05

    明暗どちらの背景でも、合わせた角丸で結果を確認し、問題なければ CSS をコピーします。

詳細

影はインターフェースが浮き上がり、フォーカス、グループ分けを示す手段です。そのため、テーマやコンポーネント、デザインと開発の受け渡しをまたいで再現できる必要があります。

  • box-shadow の構文を完全にサポートします。オフセット、ぼかし、広がり、色、不透明度、inset キーワードに対応します
  • 複数のレイヤーが一つの宣言にまとまり、平らな影ではなく柔らかく重なった奥行きを作れます
  • レイヤーごとの不透明度により、影を低い不透明度の色として扱え、純黒よりはるかに自然に見えます
  • 内側モードは、押し込んだボタン、入力欄の窪み、外側の影では表せない内縁を表現します
  • ぼかしを広げると、色付きのレイヤーはフォーカスリング、選択ハイライト、ブランドやネオンの発光になります
  • ランダム機能は、向きが決まったあとに新しい奥行きの組み合わせをすばやく試せます
  • プレビューは明暗の背景を切り替えられ、コントラストの問題がリリース前に見えるようになります
  • 調整できる角丸と要素の色により、実際のコンポーネントに近い形の上で影を判断できます
  • すべての計算はブラウザ内で行われ、未公開の製品 UI や社内のデザインが外部に出ません
  • 出力はきれいな CSS で、スタイルシート、Tailwind の任意値、CSS 変数、コンポーネントライブラリにそのまま使えます

活用シーン

影は単なる装飾であることはまれです。何がページの上に浮いているか、何が押し込まれているか、何が今フォーカスされているかを伝えます。そして同じ組み合わせを製品全体で使い回す必要があります。

  1. カードと面

    柔らかく重ねた影は、カードや面をページからちょうどよく持ち上げます。一つの濃い影のような重さなしに、コンテンツをまとめられます。

  2. ボタンと操作の状態

    通常、ホバー、アクティブ、押下の状態が一つの影の組み合わせを共有し、操作に応じて浮き上がりが一貫して上下します。

  3. モーダル、ポップオーバー、メニュー

    浮いているレイヤーは、インラインのカードより広く柔らかい影が必要です。そうしてはじめて、ページのすべての上にあると明確に読み取れます。

  4. 入力欄と押し込む操作

    内側シャドウは、テキスト欄、トグル、セグメント操作に、平らな枠線では伝えられない説得力のある窪みや押し込みの感触を与えます。

  5. フォーカスリングとアクセシビリティ

    広がりだけを設定した色付きの影は、角丸に沿うフォーカス表示になります。角丸の要素では outline より整って見えることが多いです。

  6. ブランドの発光と強調

    色付きでぼかしたレイヤーは、主要な操作や強調したい項目に注意を引きつけつつ、塗りつぶしの色枠より控えめに保てます。

  7. ダークモードの奥行き

    影は暗い背景では弱まります。暗い背景で組み合わせを確認すると、ダークモードで奥行きが消える前に不透明度を調整できます。

  8. デザインシステムとトークン

    安定した影の組み合わせは段階のトークンや CSS 変数になり、各面が一度きりの値ではなく同じ奥行きの言語を共有できます。

関連情報

影をブランド色やトークンの値から作る場合は、まず カラーコンバーター で色を整え、不透明度をきれいな基色の上に乗せます。影の下の面自体にグラデーションがある場合は、両者を一緒に設計するために グラデーション生成ツール を使うと、奥行きと背景がコンポーネント全体で一貫します。

使い方のヒント

影は手早い見た目の選択に見えますが、向き、不透明度、テーマ、再利用を一緒に考えてはじめて、本番で破綻せずに保てます。

  • 純黒ではなく、低い不透明度の暗い色を使います。本物の影は半透明であり、濃いインクではありません。
  • インターフェース全体で光の向きをそろえます。通常は小さな下向きのオフセットで、そうすると奥行きが一貫して感じられます。
  • 二、三のレイヤーで多くの段階を表せます。近くの締まった影と広い環境光の影は、一つの大きなぼかしより自然に見えます。
  • ダークモードでは不透明度を上げるか、明るめの内側ハイライトに頼ります。普通の暗い影は暗い面ではほとんど消えるためです。
  • 角丸の要素では outline より、広がりだけの色付きの影を選ぶと、フォーカスリングが角丸に沿います。
  • 大きい面や頻繁に再描画される面では、大きなぼかしを避けます。重い影はスクロール時の描画コストを上げます。
  • 最終的な組み合わせは、影の文字列をあちこちに貼るのではなく、段階のトークンや CSS 変数にまとめます。
  • デザインシステムに各段階を記録し、デザインファイルと出荷した UI の間で奥行きを一貫させます。

制限事項

最終的な見え方はブラウザ、ディスプレイ、周囲の CSS に左右されるため、標準化された構文は同一の奥行きの見え方を保証しません。

  • ブラウザによってぼかしや影の合成のしかたがわずかに異なり、非常に柔らかい影や多層の影は少し違って見えることがあります。
  • 大きい面やスクロールする面での大きなぼかしと広がりは描画コストを上げ、特に低性能の端末で目立ちます。
  • このツールは box-shadow に絞っています。テキストシャドウ、drop-shadow フィルター、SVG の影は構文と挙動が異なります。
  • 明るい面向けに調整した影は、通常そのまま使い回すのではなく、ダークモード用に別途見直しが必要です。
  • プロジェクトがトークン化されたスタイルを求める場合は、出力を承認済みの段階トークンに対応づけ、文字どおりの CSS 文字列を貼らないでください。
  • 透明や半透明の要素の影は背景と相互作用し、プレビューの背景はその状況を近似するにとどまります。
  • 奥行きの見え方は要素の色とその背後の面にも左右されるため、重要な場面は実際のレイアウトで確認してください。

よくある質問

使い方、レイヤー、テーマ、実際の制限を中心に、フロントエンドの実装とデザインの協働で box-shadow を使うときによくある質問をまとめました。

生成された CSS は本番でそのまま使えますか。

使えます。出力は標準の box-shadow 構文で、スタイルシート、コンポーネントのスタイル、Tailwind の任意値、CSS 変数にそのまま入れられます。

なぜ複数のシャドウを重ねるのですか。

本物の奥行きは一つの影だけでは生まれません。締まって濃い近くの影と、広く柔らかい環境光の影を合わせると、一つの大きなぼかしよりはるかに自然に見えます。

内側シャドウはいつ使いますか。

入力欄の窪み、押し込んだボタン、内縁など、影を要素の周りではなく内側に落としたい凹んだ面で内側シャドウを使います。

フォーカスリングはどう作りますか。

オフセットとぼかしを 0 にし、そのレイヤーに小さな正の広がりとブランド色を与えると、角丸に沿うリングになり、角丸の要素に向いています。

ダークモードで影が消えるのはなぜですか。

暗い影は暗い背景とのコントラストがほとんどありません。暗い背景でプレビューして不透明度を上げるか、淡い内側ハイライトを加えると奥行きが保てます。

影の色は純黒にすべきですか。

ほとんどの場合は不要です。本物の影は半透明です。低い不透明度の暗い色は要素の背後にあるものとなじみ、純黒よりはるかに自然に見えます。

編集中にデザインはアップロードされますか。

されません。プレビューと CSS の生成はすべてブラウザ内で行われるため、未公開の製品 UI や機密のデザイン作業にも安心して使えます。

Tailwind で使えますか。

使えます。出力は shadow- のような任意値の構文に収まり、tailwind.config の boxShadow や theme の拡張にも入れられます。

影はページの性能に影響しますか。

小さな影のコストは低いです。大きい面やスクロールする面での大きなぼかしや広がりは、低性能の端末で描画コストを上げるため、重い影は範囲を絞ってください。

ページ間で奥行きを一貫させるには。

最終的な組み合わせを段階のトークンや CSS 変数にまとめ、再利用するコンポーネントから参照します。影の文字列を複数のファイルで繰り返さないでください。

関連ツール

影は、インターフェースに奥行きと色を組み立てる一つの工程です。色の変換やグラデーションの設計と組み合わせ、整えた色の値から奥行きを経て、一貫した出荷可能な面へと進められます。