Box Shadow ジェネレーター
最大6層のシャドウを重ね、それぞれを独立に調整して、クリーンな CSS / Tailwind コードをワンクリックでコピー。
Box Shadow ジェネレーターの使い方
- 「レイヤーを追加」をクリックして最大6層のシャドウを重ねます。リストから任意のレイヤーを選択して編集。
- オフセット X/Y でシャドウを動かし、ぼかしで柔らかさ、広がりでサイズを調整します。
- シャドウの色と不透明度を選択。「インセット」を有効にすると内側の奥行き表現に。
- デモボックス（色・背景・角丸）を実際のコンポーネントに合わせます。
- CSS タブから結果をコピーするか、Tailwind タブでユーティリティクラスを取得します。
この Box Shadow ジェネレーターについて
CSS の box-shadow プロパティは、水平・垂直オフセット、ぼかし半径、広がり半径、色、オプションの inset キーワードを持つシャドウのカンマ区切りリストを受け取ります。多層シャドウを手で書くのは面倒で、1つの値の小さな変更が結果を大きく変えてしまいます。このジェネレーターは各レイヤーに独立したコントロールを提供し、合成結果をリアルタイムで表示します。
プリセットを出発点にしましょう。繊細な「ソフト」な浮遊感から、Material スタイルのレイヤードな奥行き、ハードな「エッジ」のレトロシャドウ、輝く「ネオン」効果まで。負の広がり値は自然でフォトリアリスティックなシャドウに最適です。生成される CSS はすべてのモダンブラウザで動作し、Tailwind 出力は Tailwind CSS v3+ 互換の任意値構文を使用します。
Box Shadow のよくある質問
多層の box-shadow はどう作りますか？
「レイヤーを追加」をクリックしてシャドウを重ねます。各レイヤーには独立したオフセット、ぼかし、広がり、色、不透明度、インセット設定があります。CSS 出力はすべてのレイヤーを自動でカンマで連結します。矢印ボタンで順序を変更でき、最初のレイヤーが最前面に描画されます。
box-shadow の広がり（spread）値は何をしますか？
広がりはぼかしの前にシャドウを拡大（正値）または縮小（負値）します。正の広がりはシャドウを要素より大きくし、ボーダーやネオングローに便利です。負の広がりはシャドウを内側に引き、大きなぼかしと組み合わせると柔らかく自然な奥行きを作れます。
内側のシャドウ（インセット）はどう作りますか？
任意のレイヤーで「インセット」を有効にします。インセットシャドウは要素の内側に描画され、押し込みやエンボス効果を作ります。1つの box-shadow 宣言でインセットと通常レイヤーを混在させることも可能です。
生成される Tailwind クラスは有効ですか？
はい。Tailwind 出力は shadow-[0_8px_24px_-6px_rgba(30,27,75,0.35)] のような任意値構文を使用し、Tailwind CSS v3 以降（v4 エンジンを含む）で設定不要で動作します。
自分のページでシャドウが違って見えるのはなぜ？
シャドウは要素のサイズ、角丸、背後の背景の影響を受けます。デモボックスの色、角丸、背景を実際のコンポーネントに合わせれば、正確なプレビューが得られます。