CSS box-shadow Generator
直感的なスライダーで複数の影（レイヤー）を重ね合わせ。
CSS、Tailwind対応のコードをワンクリックで出力します。
Layers
Shadow Parameters
About CSS box-shadow Generator
「CSS box-shadow ジェネレーター」は、Web要素のボックスシャドウ（影）を視覚的、かつ直感的に作成できる無料ツールです。影の重ね合わせ（マルチレイヤー）にも対応しており、より立体的で自然な表現が可能です。
ニューモフィズム（Neumorphism）、グラスモーフィズム、ネオン調の光彩効果など、様々なデザイントレンドをボタン一つで呼び出せる「プリセット」を豊富に用意しています。
作成した影のコードは「標準CSS」「CSS変数（カスタムプロパティ）」「Tailwind CSS」の3つのフォーマットで出力できるため、プロジェクトの環境に合わせてコピー＆ペーストですぐに活用いただけます。
How to create box-shadow
プリセット選択・レイヤー追加
上部のプリセットから好みのスタイルを選ぶか、「レイヤー追加」ボタンから新しい影の層を作成します。
スライダーで詳細を調整
X/Y オフセット、ぼかし、広がり、影の色をスライダーで微調整します。プレビューエリアでリアルタイムに確認できます。
形式を選んでコードをコピー
出力パネルで、CSS、CSS変数、Tailwindのいずれかのタブを選択し、生成されたコードをコピーして使用します。
box-shadow Properties
- 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）が近年のトレンドです。
Use Cases for CSS box-shadow
カードUI
記事カードや商品カードに自然な影を落とし、背景から浮かび上がらせることで、クリック可能な要素であることをユーザーに直感的に伝えます。
ボタンデザイン
CTAボタンに影をつけ、さらに :hover や :active 時に影の広がりやインセットを変更することで、押した感触（フィードバック）を表現します。
モーダル・ダイアログ
画面中央にポップアップするモーダルウィンドウに対し、大きく広がりのある影（ドロップシャドウ）を適用し、背面のコンテンツとの重なりを強調します。
ニューモフィズム
明るいハイライト（白や明るい色の影）と暗い影の2つのレイヤーを対角線上に配置し、要素が背景と一体化したような3D UI（ニューモフィズム）を作成します。
Send Feedback
Please let us know your thoughts to help us improve the tool.
Feedback is temporarily suspended
The server is busy or spam protection is active. Please try again later.