CSS box-shadowジェネレーター

CSSの `box-shadow` プロパティはHTML要素に1つ以上のシャドウ効果を追加します。各シャドウは最大6つの値で定義されます。オプションの `inset` キーワード、水平オフセット、垂直オフセット、ブラー半径、スプレッド半径、そしてカラーです。正の水平オフセットはシャドウを右に押し出し、正の垂直オフセットは下に押し出します。複数のシャドウはカンマで区切られ、前面から背面の順に描画されます。これは画像を使わずに、UIコンポーネントに視覚的な奥行き、エレベーション階層、グロー効果、ニューモーフィックスタイリングを追加するための主要なCSSメカニズムです。

完全な構文は `box-shadow: [inset] offset-x offset-y [blur-radius] [spread-radius] color` です。必須なのは `offset-x`、`offset-y`、`color` のみで、`blur-radius` と `spread-radius` は省略するとデフォルトの0になり、`inset` を省略すると外側のシャドウになります。典型的なカードシャドウは `box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.12)` のようになります。シャドウをカンマで区切れば無制限にスタックでき、前面から背面の順（最初に書いたものが上）に描画されます。このジェネレーターは `box-shadow:` プロパティ名を含む完全な宣言、または好みに応じて値のみを出力します。

ブラー半径はエッジの柔らかさを制御します。ゼロにすると要素の形状に正確に合った硬くくっきりとしたエッジになり、値が大きくなるほど徐々に柔らかく、より拡散したフェードになります。スプレッド半径はブラーを適用する前にシャドウ全体を拡大・縮小します。正の値は要素の境界を超えて拡大し、負の値は内側に縮小します。最もリアルに見えるシャドウは、適度なブラーと少し負のスプレッドを使用し、シャドウが広がりすぎずに要素のフットプリントに近い状態を保ちます。これがDeepとFloatingプリセットで使われているテクニックです。

シャドウ宣言の先頭に `inset` キーワードを追加します。`box-shadow: inset 0px 2px 6px rgba(0, 0, 0, 0.20)` のようになります。インセットシャドウは要素の後ろではなく、ボーダーボックスの内側に描画され、凹んだまたは押し込まれた外観を作ります。一般的な用途としては、入力フィールド（フォーカスの深さを表示）、トグルスイッチのトラック、押しボタンのアクティブ状態、エンボス加工されたテキストコンテナなどがあります。このジェネレーターには各レイヤーのコントロールパネルにインセットトグルがあります。有効にすると、プレビュー要素でシャドウが即座に内側に反転します。

はい。CSSでは1つの要素にカンマ区切りで任意の数のシャドウを指定できます。記述した順に描画され、最初のシャドウが最前面になります。複数のレイヤーを重ねることが、スムーズでリアルな奥行きを作るための重要なテクニックです。単一の大きなシャドウは人工的に見えますが、3〜5層のグラデーションレイヤーは光が物理的に散乱する様子を模倣します。このジェネレーターは最大8つの独立したレイヤーをサポートし、各レイヤーには独自のオフセット、ブラー、スプレッド、カラー、不透明度、インセットトグルがあります。目のアイコンで個々のレイヤーを表示・非表示に切り替え、削除せずに素早いビフォー・アフター比較ができます。

ニューモーフィズムは、ページと背景色が一致する要素に2つの対照的なシャドウを使います。1つは明るい（ほぼ白の）シャドウが左上を指し、もう1つは暗い（低い不透明度の黒）シャドウが右下を指します。これにより、要素が背景サーフェスから押し出されているように見えます。典型的なニューモーフィックの宣言は `box-shadow: -6px -6px 12px rgba(255,255,255,0.8), 6px 6px 12px rgba(0,0,0,0.15)` です。錯視を機能させるには、要素の背景色がページの背景色と完全に一致している必要があります。このジェネレーターのNeumorphicプリセットがすぐに使えるスターティングポイントを提供しています。プレビュー背景を「ソフトグレー」に切り替えると、コンテキストの中で確認できます。

オフセットをゼロにし、大きなブラー半径と色付きの値を使います。`box-shadow: 0px 0px 20px 4px rgba(59, 130, 246, 0.5)` のようになります。オフセットをゼロにすることで、グローがすべての方向に均等に放射されます。正のスプレッドはグローを要素からさらに遠ざけます。明るいコアのために小さなブラーと高い不透明度を持つ1層と、周囲のハローのために大きなブラーと低い不透明度を持つ1層の合計2層を組み合わせると、より説得力のある発光効果が生まれます。Glow Blueプリセットがこの2層アプローチを実演しています。カラーを任意の色相に変更して、カスタムアクセントグローを作成してください。

1つの大きなシャドウの代わりに、3〜5層を重ねます。各層でオフセットとブラーをほぼ2倍にしながら不透明度を半分に減らしていきます。例えば `0px 1px 2px rgba(0,0,0,0.06), 0px 4px 8px rgba(0,0,0,0.08), 0px 12px 24px rgba(0,0,0,0.06)` のようになります。このテクニックは光が点光源から物理的に散乱する様子を模倣し、どのズームレベルや表示解像度でも説得力のある見た目を保ちます。このジェネレーターのDeepとFloatingプリセットはまさにこの原則に基づいて構築されています。3層のグラデーションレイヤーが、あらゆるスケールで自然に見えます。

`box-shadow` は常に要素の矩形ボーダーボックスに従います。要素が視覚的にどのように見えるかに関わらずです。`filter: drop-shadow()` は要素の実際のアルファチャンネルのシルエットをトレースします。これは透明なPNGカットアウトやSVGアイコンで、バウンディング矩形ではなく形状に沿ったシャドウが必要な場合に有用です。標準的なUIコンポーネント（カード、ボタン、モーダル、パネル）には `box-shadow` が正しいツールです。描画が速く、インセットモードをサポートし、スプレッド半径を受け付け、複数の重ねたレイヤーを使えます。`filter: drop-shadow()` は要素の透明な背景がシャドウの形状に重要な場合にのみ使用してください。

いいえ。`box-shadow` は通常のレイアウトフローの外側に描画される純粋な視覚効果です。兄弟要素を押しのけることも、スクロール可能なコンテンツ領域を増やすことも、要素の計算された幅、高さ、マージン、パディングに影響することも一切ありません。シャドウは要素のボックスを超えて視覚的に広がりますが、レイアウトエンジンには無視されます。つまり、密にパックされたグリッドに大きなシャドウを追加してもレイアウトが崩れません。ただし、シャドウがクリップされないように親コンテナに `overflow: visible` を追加したい場合があります。

シャドウを作成したら、ジェネレーターは3つの出力形式を提供します。<strong>CSSのコピー</strong>はどのスタイルシートにも使える完全なプロパティ宣言（`box-shadow: …;`）を提供します。<strong>値のコピー</strong>はシャドウ値のみを提供します。SCSS変数、CSSカスタムプロパティ値、またはTailwindの `extend.boxShadow` エントリとして便利です。<strong>Reactスタイル</strong>はJSXインラインスタイルオブジェクトやStyled Componentsのためのキャメルケース形式（`boxShadow: '…'`）を出力します。Tailwindの場合は、カスタムシャドウユーティリティクラスを作成するために `tailwind.config.js` の `theme.extend.boxShadow` に値を貼り付けてください。

専用のボックスシャドウツールのほとんどは単一レイヤーの生成のみを提供しています。例えばcssgenerator.orgは基本的なコントロールは提供していますが、プリセットライブラリも多層スタッキングもありません。css-tricks.comのリファレンスはドキュメントであり、インタラクティブなツールではありません。cssmatic.comのCSSジェネレーターは機能はしますが古くて広告が多い状態です。UtiloKitのジェネレーターはレイヤーごとの目のトグルを持つ最大8つの独立したレイヤー、最も一般的なシャドウデザインパターンをカバーする8つのキュレートされたプリセット（カード、クリスプ、マテリアル、ニューモーフィック、フローティング、ディープ、グロー、インセットウェル）、異なるフレームワーク向けの3つの出力形式、コントラスト確認のための完全なダーク／ライト背景トグルをサポートしています。すべて広告なし、データアップロードゼロです。

はい。ボックスシャドウジェネレーターは完全レスポンシブです。iPhoneとAndroidでは、すべてのスライダーが適切なサイズのドラッグハンドルでタッチ対応になっています。ライブプレビュー要素はモバイル画面に合わせてスケーリングされます。カラーピッカーはモバイルブラウザでネイティブシステムカラーピッカーを使用します。デスクトップの3カラムレイアウトは狭い画面ではクリーンな縦型1カラムレイアウトに変化します。すべてのコピーボタンはiOSとAndroidの両方でSafari、Chrome、Firefoxがサポートするウェブクリップボードアプリプログラミングインターフェイスを使用します。アプリのダウンロードは不要で、アカウントも必要ありません。URLを開けばすぐに使い始められます。