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

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

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

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

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

box-shadow 構文の理解

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

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

人気のシャドウスタイルの解説

• Material Design Elevation（標高） — 2つのシャドウレイヤー（ソフトな環境シャドウとシャープなキーシャドウ）を使用します。標高レベル（1〜5）が上がるにつれて、オフセットとぼかしが段階的に増加します。
• Tailwind CSS ユーティリティ — Tailwindは、shadow、shadow-md、shadow-lg、shadow-xl、shadow-2xl クラスを提供しており、それぞれ一般的なカードやモーダルのユースケースに最適化された2層のシャドウを使用しています。
• ニューモーフィズム — 2つの対向するシャドウ（1つは明るく、1つは暗い）を使用して、柔らかい押し出しプラスチック効果を作成します。両方の影が見える明るい灰色の背景で最適に機能します。
• グラスモーフィズム — 控えめなシャドウを backdrop-filter のぼかしと半透明の背景と組み合わせます。シャドウがすりガラス効果の下に奥行きを加えます。

よくある質問

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) を使用しています。