CSS box-shadowジェネレーター

Bogdan Sandu (EN) 著 · 公開 2026 年 4 月 27 日 · 最終更新日 2026 年 9 月 13 日

このCSS box-shadow生成ツールは、ブラウザで使える無料のツールです。コードを1行も書かずに、要素のボックスシャドウを視覚的に作成して書き出せます。

スライダーをドラッグすると、プレビューが即座に更新されます。どの物件も目の前にあります。

制御できるもの:

• 水平および垂直オフセット
• ぼかしと広がりの半径
• 影の色と不透明度
• インセット方向またはアウトセット方向

複数のシャドウレイヤーを重ねて、複雑な効果を実現します。どこから始めればよいかわかりませんか?ソフト リフト、ネオン グロー、レトロなどの 8 つの組み込みプリセット から 1 つを選択し、そこから調整します。

プレビュー ボックスも柔軟です。丸い、正方形、円、カードの形状を切り替えます。実際のデザインコンテキストに合わせてボックスの色とキャンバスの背景を変更します。

完了したら、必要な形式でエクスポートします。

• プレーンなCSS
• CSS カスタム プロパティ (--shadow: ...)
• Tailwind 構成エントリ
• React インライン スタイル オブジェクト

出力を縮小するか、読み取り可能な状態に保ちます。ワンクリックで -webkit- プレフィックスを追加します。コピーしてプロジェクトに直接貼り付けます。

サインアップはありません。広告はありません。邪魔にならない、高速でクリーンなツールです。

CSS ボックス シャドウ ジェネレーターとは何ですか?

CSS ボックス シャドウ ジェネレーターは、スライダーとカラー入力をすぐにコピーできるボックス シャドウ構文に変換するブラウザー ベースのツールです。

オフセットとブラーの値を手動で推測する代わりに、いくつかのコントロールをドラッグすると、 ツールが宣言を作成します。

ツール全体は、CSS (EN) の単一のプロパティを中心に構築されており、それ以上のものはありません。

• ピクセルに触れたりラスタライズしたりしません
• レイアウトをデザインするのではなく、スタイリングは 1 行だけです
• これはデザイン ツールのエクスポート ステップを置き換えるものではなく、その背後にある手動計算を置き換えるだけです。

また、要素ボックスではなくレターフォームに影を付けるテキスト シャドウ ジェネレーターとも異なります。

実際に生成されるのは 1 つのコード文字列であり、スタイルシートに直接貼り付けることができます。

box-shadow プロパティはどのように機能しますか?

box-shadow プロパティ (EN)は、水平オフセット、垂直オフセット、ぼかし半径、広がり半径、色という 5 つの値を一定の順序で使用して影を描画します。

値をスキップするとブラウザはデフォルトに戻るため、数値が 2 つだけあるシャドウでもぼやけたり広がったりすることなくレンダリングされます。

順序が重要: ブラーとスプレッドを入れ替えると、ブラウザは意図に関係なく 2 番目の数値をスプレッドとして読み取ります。

外側のシャドウと内側のシャドウ

外側の影: デフォルトの動作で、ボックスがページから持ち上げられたかのように要素の後ろに配置されます。

インセット シャドウ: inset キーワードを追加すると効果が反転し、表面に押し込まれたかのようにシャドウが要素のエッジの内側に入ります。

キーワードは常に宣言内で数値の前に置かれます。

ボックス シャドウで使用できるカラー形式は何ですか?

ボックスシャドウカラーは、有効な CSS カラー値 (hex、rgb、rgba、hsl、または黒などの名前付きカラー) を受け入れます。

4 番目の値は透明度を制御するため、rgba はシャドウにとって最も重要なものです。

• 16 進数: 単色のみ、透明度チャンネルなし
• rgba: 赤、緑、青、および 0 ～ 1 のアルファ値
• hsl / hsla: 色相、彩度、明度、同じオプションのアルファ スロットを使用

完全な不透明度に設定されたシャドウは、硬いエッジのブロックのように見えます。アルファを 0.15 または 0.2 のような値に下げると、形状ではなく影として読み取られます。

デザイナーは、モックアップからカラーを 16 進コードとして引き渡すことがよくあり、その 16 進値を rgba に変換することが、通常、ジェネレーターの出力をコンプに一致させるための最初の実際のステップになります。

他の方向も同様です。パレットが HSL で構築されている場合、HSL ピックを rgb または rgba に変換すると、シャドウ カラーがデザイン システムの残りの部分と一貫性を保ちます。

1 つの宣言で複数のボックス シャドウを重ねるにはどうすればよいですか?

各シャドウをカンマで区切ると、ブラウザはそれらを単一の box-shadow 宣言にスタックします。

順序によって深さが制御されます。 リストされた最初のシャドウは要素に最も近い一番上に配置され、その後の各シャドウはさらに後方に配置されます。

2 層のカード シャドウは、次のようになります。

box-shadow: 0 2px 4px rgba(0,0,0,0.2), 0 8px 16px rgba(0,0,0,0.15);

最初の影はタイトで暗く、クローズアップの仕事をしています。 2 つ目はより大きくて柔らかく、オブジェクト全体の周囲に周囲光が降り注いでいるような錯覚を与えます。

• 2 つのレイヤー: 密着シャドウとソフト アンビエント シャドウ
• 3 つのレイヤー: 3 つ目のさらに柔らかいシャドウを追加して、大きなカードやモーダルに深みを与えます。
• レイヤー数に実質的な制限はありませんが、4 つまたは 5 つを超えるとブラウザーの速度が低下します。

シングル div CSS ローダーは常にこのトリックに頼っており、6 つの個別のノードの代わりに 1 つの要素でドットのリングを偽装します。

これは、CSS ローダー ジェネレーターのほとんどのエントリの背後にあるのと同じ階層化手法です。

どのブラウザが box-shadow をサポートしていますか? ベンダー プレフィックスが必要ですか?

いいえ、現在のすべてのブラウザはプレフィックスなしで box-shadow をレンダリングしており、10 年以上にわたってそうし続けています。

MDN の互換性テーブル (EN)を支える Web 機能データセットによると、このプロパティは、2018 年 1 月 29 日に広く利用可能なベースライン ステータスに達しました。

このマイルストーンは、ブラウザがすでにこのプロパティを安全に使用できるようにした数年後に実際に到達しました。

• Chrome は、2011 年 3 月にリリースされたバージョン 10 で、-webkit- プレフィックス要件を削除しました。
• Firefox は、同じく 2011 年 3 月にバージョン 4 で -moz- を削除しました
• Safari は 2011 年半ばにバージョン 5.1 に続きました。
• Internet Explorer は、最初の CSS3 対応リリースであるバージョン 9 でプレフィックスなしのサポートを追加しました

基礎となる仕様である CSS Backgrounds and Borders Module Level 3 (EN) は、完成した推奨ではなく、推奨草案候補として W3C によってまだ公開されています。

これは、box-shadow プロパティ自体がブラウザーで 10 年以上にわたって安定しているにもかかわらずです。

仕様ステータスと現実世界の信頼性との間のギャップこそが、ブラウザ間の互換性 (EN)テストが対象とする類のものです。

マシン上で適切に動作するプロパティは、どこでも同じように動作することを保証するものではありません。

古いプロジェクトには、10 年前の定型文から残された -webkit-box-shadow または -moz-box-shadow 宣言がまだ残っていることがあります。今すぐ削除しても、サポートされているブラウザでは何も変わりません。

Box Shadow Generator と CSS を手動で記述する: どちらを使用するべきですか?

1 回限りのシャドウにはジェネレーターを使用し、数十ものシャドウを含むデザイン システムを維持したら、手動コーディングに手を伸ばします。

この 2 つは実際にはライバルではなく、同じ仕事のさまざまな段階に適したツールのようなものです。

実際のレイアウトで実際の要素を編集しているため、精度の点では開発ツールが優れています。値が実際のページにドロップされた後にどのように表示されるかを推測することはできません。

シャドウがトークンになると、手動コーディングが成功します。

elevation-1 から elevation-4 までの設計システムには、偶然似ているように見える 4 つの別々に生成された文字列ではなく、共有変数が必要です。

ほとんどの フロントエンド (EN) チームは、まったく異なるプロパティと同様のトレードオフに直面しています。

多くの場合、簡単な背景から CSS グラデーション ジェネレーター (EN) での作業が始まります。

通常、そのグラデーションが 5 つの異なるコンポーネントに存在する必要があると、手書きのカスタム プロパティとして再構築されます。

また、ジェネレーターは、シャドウが完全に間違ったツールであることを伝えることはできません。それはスライダーではできない決断だ。

どのシャドウ スタイルがどのデザイン目標に適合するか?

4 つのシャドウ スタイルは、ソフト、ハード、ニューモーフィック、マテリアル エレベーションのほとんどの実際のインターフェイスをカバーします。

それぞれは実際には、同じプロパティに適用されるブラー、スプレッド、レイヤリングの異なる組み合わせにすぎません。

ソフトシャドウ

ソフト シャドウでは、広いぼかし半径と低い不透明度を使用するため、エッジは突然停止するのではなくフェードアウトします。

これは、カード、モーダル、その他ページの上にそっと置かれているように感じられるものに対するデフォルトの選択です。

長所:

• ほぼすべての背景で落ち着いてモダンに読めます
• ぼかしによってシャープなエッジが隠れるため、小さなオフセットや色の間違いは許容されます。

短所:

• 混雑した背景では色あせたり、ほとんど見えなくなったりすることがあります
• ページ全体で過度に使用されると、深さをまったく伝えることができなくなります

CSS シャドウ エフェクト (EN) ギャラリーを使用すると、ボタン、カード、ヘッダーに適用されたソフト シャドウを並べて確認することができます。

ハードシャドウ

ぼやけはゼロ、ある程度の広がり、見やすいオフセット。これはハード シャドウであり、照明効果ではなくグラフィック要素として読み取れます。

長所: インターフェースに、ソフト シャドウでは誤魔化せない、レトロともいえる独特の個性を与えます。

短所: 2 つのスタイルが融合していないため、すでにソフトまたはミニマル寄りの UI とひどく衝突します。

ブルータリストおよびネオ ブルータリストの Web デザインは常にハード シャドウに頼っており、多くの場合、グラデーションの代わりに太い枠線やフラット カラーと組み合わせられます。

ニューモーフィズム

WCAG 2.1 の非テキスト コントラスト ルール (EN)では、インタラクティブ コンポーネントに3:1 の比率が必要ですが、ほとんどのニューモーフィック インターフェイスは設計によりこれに適合しません。

このスタイルは、要素自体とほとんど変わらない背景上にある、明るい影と暗い影の 2 つの影に依存しています。

それがまさに、低コントラストの問題を引き起こす原因です。

つや消しの半透明の外観が求めているものに近い場合、それはレイヤー化されたシャドウではなく背景のぼかしから構築された、まったく別のテクニックです。

このスタイルは、別の glassmorphism ジェネレーター でカバーされています。

材料の標高

Google のマテリアル デザインの標高ガイドライン (EN)では、影の深さを 0 ～ 24 の Z 空間スケールにマッピングします。

各レベルは、特定の dp 値とわずかに異なるシャドウに関連付けられています。

標高が高いほど、影が大きくて柔らかくなり、物理的に光源に近いオブジェクトを模倣します。

優れている点: すべてのコンポーネントが 1 回限りのシャドウ値ではなくレベルを選択するため、大規模なアプリ全体で一貫性が保たれます。

システムはボタンからモーダルまできれいに拡張されます。

不十分な点: これは完全なデザイン システムへの取り組みであり、素敵なカード シャドウを 1 つ必要とする単一のマーケティング ページとしてはやりすぎです。

box-shadow はページ レンダリングのパフォーマンスに影響しますか?

はい。多くのほかのプロパティよりも負荷がかかります。box-shadowの値が変わるたびに、ブラウザは各フレームでピクセルを再描画する必要があります。これは描画処理の中でもコストの高い工程の1つです。

Google のレンダリング パフォーマンスのドキュメント (EN)では、スクリプト、スタイル、レイアウト、ペイントの組み合わせをカバーし、60 fps を維持するためのフレーム バジェットを約 16 ミリ秒としています。

同じ文書の中で、塗装はその予算の中で最も高価な部分の 1 つとして挙げられています。

• ボックスシャドウをアニメーション化すると、フレームごとに再描画が直接トリガーされます。
• 代わりに、不透明度または変換をアニメーション化すると、再描画がほぼ完全に回避されます。
• 静的でアニメーション化されていないボックス シャドウは、ページが描画されると追加料金はかかりません。

Tobias Ahlin のレンダリング テスト (EN)では回避策が見つかりました。それは、擬似要素に影を置き、影自体ではなくその要素の不透明度をアニメーション化するというものです。

視覚的な結果は、すべてのフレームでペイント ステップを実行しないだけで、ボックス シャドウを直接アニメーション化した場合と同じように見えます。

box-shadow が適用されない場合は?

必要な形状が長方形でなくなった瞬間、box-shadow は適切なツールではなくなります。

プロパティは常に要素のボックス、または境界半径が設定されている場合はその半径に従います。その箱の中に何が入っているかはわかりません。

• 透明 PNG とロゴ: 代わりに filter:drop-shadow() を使用します。これは、長方形のフレームではなく画像のアルファ チャネルに従うためです。
• 不規則なベクトル形状: ネイティブ SVG フィルターは、境界ボックスの代わりに実際のパスをトレースします。
• 安価で一定のアニメーション: box-shadow はフレームごとに再描画を強制するため、アニメーション化された疑似要素を選択することをお勧めします。
• 印刷スタイルシート: ほとんどのブラウザは、デフォルトで印刷時にボックスシャドウを削除します。

2 番目のケースは、SVG (EN) で作成されたロゴやアイコンの場合に最も重要であり、星やロゴの形状の後ろにある長方形の影が明らかに間違っているように見えます。

filter:drop-shadow() に関する MDN 独自のドキュメント (EN)では、この区別が明確にされています。 box-shadow はボックスに影を付け、drop-shadow はコンテンツに影を付けます。

デザイン ツールのエクスポートされたシャドウも、きれいに変換できない場合があります。 Figma のドロップ シャドウ エフェクト (EN)はボックス シャドウに厳密にマップされますが、レイヤー化された塗りつぶしから構築されたグローには通常、同等のきれいな CSS がまったくありません。

CSS ボックス シャドウ ジェネレーターを段階的に使用するにはどうすればよいですか?

以下の順序は、ほとんどのジェネレーターが実際に左から右、上から下にレイアウトされている方法と一致しています。

• ステップ 1: 最初に水平オフセットと垂直オフセットを選択します。これは、他のことが重要になる前に影の位置を決定するためです。
• ステップ 2: ぼかし半径を設定して、エッジの柔らかさまたは鮮明さを制御します。
• ステップ 3: 影を要素自体よりも大きくまたは小さく見せる必要がある場合にのみ、広がり半径を調整します。
• ステップ 4: 色と不透明度を最後に設定します。影の暗さは、そのサイズと形状が決定されて初めて意味をなすためです。
• ステップ 5: 影を要素の後ろではなく要素の内側に配置する必要がある場合は、インセットをオンに切り替えます。
• ステップ 6: ジェネレーターのデフォルトのキャンバスではなく、要素が配置される実際の背景色に対して結果をプレビューします。
• ステップ 7: 生成された box-shadow 宣言をコピーし、要素のスタイルシート ルールに貼り付けます。

間違った背景でプレビューすることが、ツールでは影が完璧に見えても、ライブ ページでは正しく見えない最も一般的な理由です。

ジェネレーターのデフォルトのプレビュー領域は通常、無地の白または明るいグレーで、ほぼすべてのシャドウ値に適しています。

生成された box-shadow コードを Tailwind CSS、Sass、または Bootstrap に追加するにはどうすればよいですか?

ジェネレーターは生のボックスシャドウ文字列を渡します。次にそれをどうするかは、プロジェクトがすでに使用しているフレームワークによって異なります。

Tailwind (EN) には、固定のシャドウ スケールが標準で付属しています。

現在の v4 ドキュメント (EN)には、shadow-2xs からshadow-2xl までの 7 つのサイズのユーティリティがリストされています。

それぞれは、ハードコードされた値ではなく CSS 変数にマップされます。

ジェネレーターの出力を Tailwind にドロップするということは、これら 7 つの変数の 1 つを置き換えるか、1 回限りのシャドウ [値] の任意の構文を使用することを意味します。

Sass は値をそのまま受け取ります。これを変数として保存すると ($shadow-card など)、1 回限りのジェネレーター出力がコンポーネント ライブラリ全体で再利用可能なものに変わります。

Bootstrap (EN) は 3 つの中で最も厳格です。

その公式ドキュメント (EN)では、3 つの Sass 変数から構築された、shadow-none、shadow-sm、shadow、shadow-lg という正確に 4 つのシャドウ クラスが定義されています。

生成ツールで作成した独自の値をBootstrapにそのまま組み込むことはできません。再コンパイルする前に3つの変数のいずれかを置き換えるか、インラインスタイルとして適用する必要があります。

Shopify の Polaris 設計システムは、トークンのアプローチをさらに一歩進めています。

個々のコンポーネントに生の box-shadow 文字列を持たせるのではなく、独自のトークン パッケージで名前付きシャドウ深度を定義します。これは Sass 変数の背後にある本能と同じであり、実際の設計システムとして形式化されたものです。

ボックスシャドウで最もよくある間違いは何ですか?

ボックスシャドウのバグのほとんどは、 結局のところ再現性のある少数のミスに起因します。

• レイヤー化されたシャドウ間にカンマがありません
• ブラーとスプレッドの値が交換されました
• インセットが間違った位置に配置されました
• 影の色は完全な不透明度のまま

このうち２人は沈黙している。ブラウザはエラーをスローせず、意図したものと一致しないものを表示するだけです。

境界半径の不一致は、より静かな問題を引き起こします。丸い要素上の影は、境界線の半径に自動的に従います。

丸い角に対して正方形に見える影は、通常、半径が影を運ぶ要素ではなく子要素に設定されていることを意味します。

透明な背景も同様の混乱を引き起こします。影は、要素のボックス内に表示されているものの周囲ではなく、要素のボックスの周囲にレンダリングされます。

画像自体がどれほど不規則に見えても、div 内にある透明な PNG には長方形の影が表示されます。

よくある質問：CSS box-shadowジェネレーター

box-shadow と text-shadow の違いは何ですか?

text-shadow はテキスト コンテンツの文字形をシェーディングし、box-shadow は要素のボーダー ボックス全体をシェーディングします。

見出しには、その文字の背後にあるテキスト シャドウと、それらを保持するコンテナの背後にある別個のボックス シャドウの両方を同時に含めることができます。

box-shadow は角丸要素の border-radius で正しく動作しますか?

はい。ボックスシャドウは要素の境界半径に自動的に従い、長方形のままではなく同じ角で曲がります。丸い要素上で影が正方形に見える場合、半径は影を運ぶ要素ではなく子要素上にあります (よくある間違いを参照)。

Can box-shadow Be Animated With CSS Transitions?

技術的にはそうですが、それにはコストがかかります。box-shadow を遷移すると、ブラウザはすべてのフレームで再描画を強制されます。よりスムーズな代替方法では、パフォーマンス セクションで説明されているように、すでにシャドウが含まれている疑似要素の不透明度をアニメーション化します。

box-shadow 値を画面サイズ間で応答性を持たせるにはどうすればよいですか?

メディア クエリ内でオフセット、ブラー、スプレッドをスケールし、ビューポートが狭くなるにつれてすべての値をまとめて縮小します。

一般的なパターンでは、 ぼかし半径のみにclamp() を使用し、ブレークポイントごとに個別のルールを記述する代わりに、1 つの宣言をスムーズに調整します。

生成された CSS を複数のプロジェクト間で再利用するにはどうすればよいですか?

すべてのスタイルシートに同じ文字列を貼り付けるのではなく、--shadow-card のようなCSS カスタム プロパティに宣言を一度保存します。

共有プロパティ ファイルをインポートするプロジェクトはすべて同じシャドウ値を継承し、1 回の編集でどこでもその値を更新します。

CSS ボックス シャドウ ジェネレーターはどこで故障しますか?

CSS ボックス シャドウ ジェネレーターは、プロジェクトのコンポーネント ライブラリ全体で 12 を超える個別のシャドウ値が蓄積されると機能しなくなります。その時点で、 一回限りのジェネレーターの出力は維持されたトークン システムに置き換えられます。

このスプロールの修正は、ランダムなクリーンアップ パスではなく、特定の順序に従います。

• 最初にクロスブラウザーレンダリングをチェックする
• 重複値の統合 2 番目
• 3番目の共有デザイントークンファイルへのトークンの抽出

レンダリングをチェックすると、まれなバグが多数のコンポーネントにベイクされる前にまず検出されます。 2 番目に重複に近い値を統合すると、トークン抽出に苦痛を与えるノイズが除去されます。

シャドウを固定トークン セットに標準化するには、柔軟性が必要になります。コンポーネントは、小さなビルドステップを行わずに任意の調整を要求できなくなり、1 回限りの磨きをインターフェース全体の一貫性と引き換えにします。

次の自然なステップは、専用の境界半径ジェネレーターを使用して同じ要素の角を丸めることです。これは、影の深さと角の半径がほぼすべてのカードまたはボタンで一緒に調整されるためです。