CSS box-shadow ジェネレーター
直感的なスライダーで複数の影（レイヤー）を重ね合わせ。
CSS、Tailwind対応のコードをワンクリックで出力します。
レイヤー設定
影のパラメータ
CSS box-shadow ジェネレーターについて
「CSS box-shadow ジェネレーター」は、Web要素のボックスシャドウ（影）を視覚的、かつ直感的に作成できる無料ツールです。影の重ね合わせ（マルチレイヤー）にも対応しており、より立体的で自然な表現が可能です。
ニューモフィズム（Neumorphism）、グラスモーフィズム、ネオン調の光彩効果など、様々なデザイントレンドをボタン一つで呼び出せる「プリセット」を豊富に用意しています。
作成した影のコードは「標準CSS」「CSS変数（カスタムプロパティ）」「Tailwind CSS」の3つのフォーマットで出力できるため、プロジェクトの環境に合わせてコピー＆ペーストですぐに活用いただけます。
box-shadow の作成手順
プリセット選択・レイヤー追加
上部のプリセットから好みのスタイルを選ぶか、「レイヤー追加」ボタンから新しい影の層を作成します。
スライダーで詳細を調整
X/Y オフセット、ぼかし、広がり、影の色をスライダーで微調整します。プレビューエリアでリアルタイムに確認できます。
形式を選んでコードをコピー
出力パネルで、CSS、CSS変数、Tailwindのいずれかのタブを選択し、生成されたコードをコピーして使用します。
box-shadow プロパティ解説
- X Offset (X 軸方向)
- 影の水平方向の位置。正の値で右へ、負の値で左へ移動します。
- Y Offset (Y 軸方向)
- 影の垂直方向の位置。正の値で下へ、負の値で上へ移動します。
- Blur (ぼかし)
- 影のぼかしの半径。値が大きいほど影は広く、薄く、ぼやけた印象になります（負の値は指定できません）。
- Spread (広がり)
- 影の拡大・縮小。正の値で影が全方向に大きくなり、負の値で要素より小さく縮みます。
- Inset (内側の影)
- 指定すると要素の外側ではなく、内側（境界線の内側から中心に向かって）に影が描画されます。
よくある質問 (FAQ)
- Q.box-shadow はパフォーマンスに影響しますか？
- はい。ぼかし（Blur）の大きな影や多数のレイヤーは描画コストがかかるため、モバイルデバイス等ではレンダリング（再描画）が重くなる場合があります。特にアニメーションで box-shadow を動かす場合は注意が必要です。
- Q.box-shadow と filter: drop-shadow() の違いは？
box-shadowは要素のボックス（矩形）に対して影を付けます。一方、filter: drop-shadow()は要素の不透明な形状（透過PNG画像の輪郭など）に対して影を生成します。- Q.inset はどのような表現で使いますか？
- ボタンの押下状態の表現（へこみ効果）、テキストフィールドの内側の影、ニューモフィズムやネオンデザインのハイライト描画などに使われます。
- Q.複数の影を重ねるメリットは？
- 単一のぼかし影よりも、複数のレイヤーを重ねることでより自然でリアルな奥行きを表現できます。例えば、近い影（小さく濃い）と遠い影（大きく薄い）を重ねる手法（Smooth Shadow）が近年のトレンドです。
CSS box-shadow の活用シーン
カードUI
記事カードや商品カードに自然な影を落とし、背景から浮かび上がらせることで、クリック可能な要素であることをユーザーに直感的に伝えます。
ボタンデザイン
CTAボタンに影をつけ、さらに :hover や :active 時に影の広がりやインセットを変更することで、押した感触（フィードバック）を表現します。
モーダル・ダイアログ
画面中央にポップアップするモーダルウィンドウに対し、大きく広がりのある影（ドロップシャドウ）を適用し、背面のコンテンツとの重なりを強調します。
ニューモフィズム
明るいハイライト（白や明るい色の影）と暗い影の2つのレイヤーを対角線上に配置し、要素が背景と一体化したような3D UI（ニューモフィズム）を作成します。
フィードバックを送信
ツールをより良くするためのご意見をお聞かせください。
現在、フィードバックの受付を一時停止しています
サーバーが混み合っているか、スパム防止のための安全装置が作動しています。しばらく経ってから再度アクセスしてください。