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

ライブプレビュー付きの無料オンラインCSSボックスシャドウジェネレーター。複数のシャドウのレイヤー化、厳選されたプリセットからの選択、インセットモードの切り替え、そして本番環境でそのまま使えるコードの即時コピーが可能です。すべての処理はブラウザ上で行われます。

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

クイック例:

ライブプレビュー

↕ ドラッグしてオフセットを調整

シャドウレイヤー

レイヤー設定

Xオフセット px

Yオフセット px

ぼかし px

広がり px

色

不透明度 %

内側シャドウ (Inset)

厳選プリセット

生成されたCSS

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

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

CSSボックスシャドウジェネレーターを使用すると、box-shadow エフェクトを視覚的にデザインし、本番環境ですぐに使えるCSSを即座にコピーできます。複数のシャドウレイヤーを重ねたり、Material Design、Tailwind CSS、ニューモーフィズムからインスピレーションを得た厳選プリセットから選択したり、プレビューを直接ドラッグしてシャドウを配置したりできます。すべてブラウザ内で動作するため、コードがページの外に出ることはありません。

CSSボックスシャドウジェネレーターの使い方

シャドウコントロールを調整する — スライダーを使用して、水平オフセット (X)、垂直オフセット (Y)、ぼかし半径、広がり半径を設定します。プレビューエリアを直接ドラッグして、直感的に位置を調整することもできます。
色と不透明度を選択する — カラーピッカーでシャドウの色を選択し、不透明度スライダーで透明度を微調整します。プレビューはリアルタイムで更新されます。
複数のレイヤーまたはプリセットを追加する — + シャドウレイヤーを追加 をクリックして、シャドウを重ねることで現実的な奥行きを表現できます。または、厳選されたプリセット（Material、Tailwind、ニューモーフィズムなど）を選択して、定評のあるデザインから開始することもできます。
CSSをコピーする — コピー をクリックして、生成された box-shadow コードを取得し、スタイルシートに直接貼り付けます。

box-shadow 構文の理解

box-shadow: [inset] <offset-x> <offset-y> <blur-radius> <spread-radius> <color>;

offset-x / offset-y

シャドウの水平および垂直方向の変位。正の値は右/下に、負の値は左/上に移動します。

blur-radius（ぼかし半径）

影のぼかし具合を制御します。0 はシャープなエッジになり、値が大きいほどソフトで拡散した影になります。

spread-radius（広がり半径）

影を拡大または縮小させます。正の値は大きくし、負の値は縮小させます。要素の下に配置する控えめなエフェクトに便利です。

inset（内側）

指定すると、影が要素の内側に描画されます。一般的に、押されたボタンやくぼんだ入力フィールドに使用されます。

プロフェッショナルなボックスシャドウのためのヒント

複数のシャドウを重ねる — 現実世界の物体は複雑な影を落とします。2〜3のレイヤー（ソフトな環境光レイヤー + シャープなキーライトレイヤー）を使用すると、単一のシャドウよりもはるかにリアルな結果が得られます。
低い不透明度を使用する — 不透明度が8〜20%のシャドウは自然に見えます。不透明度が高すぎる黒いシャドウは、不自然で古臭い印象を与えるため避けましょう。
光の方向を合わせる — UI全体でシャドウのオフセットを一貫させ、単一の光源をシミュレートします。不整合なシャドウは視覚的な錯覚を損ないます。
色の付いたシャドウ — 黒の代わりに、要素の背景色の暗い色調を使用すると、よりまとまりのあるモダンな外観になります。
ネガティブスプレッド — 広がり半径に負の値を設定すると、シャドウが要素よりも小さくなり、エッジが目立たない「接地面の影」を作成して要素を接地させることができます。

よくある質問

CSSのbox-shadowプロパティとは何ですか？

CSSの box-shadow プロパティは、要素のフレームの周囲に影の効果を追加します。水平オフセット、垂直オフセット、ぼかし半径、広がり半径、および色の値を受け入れます。複数のシャドウをカンマで区切って、重層的な奥行き効果を作成できます。

CSSで複数のボックスシャドウを作成するにはどうすればよいですか？

複数のボックスシャドウは、各シャドウの定義をカンマで区切ることで作成されます。例：box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.1)。各シャドウは前のシャドウの上にレンダリングされ、最初のシャドウが一番上に表示されます。

box-shadowとdrop-shadowの違いは何ですか？

box-shadow は要素の矩形のボックスに影を適用しますが、filter: drop-shadow() は透明部分を含む実際の形状に従います。box-shadow は、drop-shadow がサポートしていない広がり半径とinsetモードをサポートしています。標準的な矩形要素の場合、box-shadow の方が一般的でパフォーマンスに優れています。

insetボックスシャドウとは何ですか？

insetボックスシャドウは、要素の外側ではなく内側に表示される影です。シャドウの値の前に inset キーワードを追加することで作成されます。内側の影は、押されたボタンの効果、入力フィールドのスタイリング、くぼんだ外観や彫り込まれた外観を作成するために一般的に使用されます。

控えめなカードエフェクトに適したbox-shadowの値は何ですか？

人気のある控えめなカードシャドウは、2つのレイヤーを使用します：近接した影に 0 1px 3px rgba(0,0,0,0.12)、定義に 0 1px 2px rgba(0,0,0,0.24) を使用します。Tailwind CSSは、デフォルトのシャドウユーティリティに 0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1) を使用しています。

このコンテンツ、ページ、またはツールを引用する場合は、次のようにしてください：

"CSSボックスシャドウジェネレーター"（https://MiniWebtool.com/ja/cssボックスシャドウジェネレーター/） MiniWebtool からの引用、https://MiniWebtool.com/

by miniwebtool チーム. 更新日: 2026-03-07

開発者向け API が利用できます: このツールをアプリ、自動化、エージェントから 1 回の JSON HTTP リクエストで実行できます。 API ドキュメントを見る