データはサーバーに一切送信されません
アカウント不要で即座に利用可能
すべての変更がリアルタイム反映
CSS box-shadow ジェネレーターは、ウェブ要素のボックスシャドウをビジュアルで作成できる無料オンラインツールです。複数レイヤーの影を重ねて奥行きのあるリアルな陰影を表現でき、ニューモーフィズムやMaterial Designスタイルのプリセットからワンクリックで適用できます。
通常のCSS・CSS変数・Tailwind CSS の3つの出力形式に対応。プレビューエリアで影の効果をリアルタイム確認しながら、コピペですぐにプロジェクトに組み込めます。
すべての処理はブラウザ内で完結し、データがサーバーに送信されることはありません。登録不要でご利用いただけます。
プリセットを選ぶ or レイヤーを追加
上部のプリセットギャラリーから好みのスタイルをクリック。ゼロから作る場合は「＋ レイヤー追加」でシャドウレイヤーを作成します。
スライダーで微調整
X/Yオフセット、ぼかし、広がり、色、透明度をスライダーで調整。複数レイヤーを重ねることでよりリアルな陰影を表現できます。
コードをコピー
CSS・CSS変数・Tailwind形式からお好みのフォーマットを選んで📋ボタンでコピー。そのままプロジェクトに貼り付けてご利用ください。
box-shadow プロパティはCSS3で導入された強力なプロパティで、要素に1つ以上の影を追加します。
| 値 | 説明 | デフォルト |
|---|---|---|
offset-x | 影の水平方向の位置。正の値で右、負の値で左に移動 | 必須 |
offset-y | 影の垂直方向の位置。正の値で下、負の値で上に移動 | 必須 |
blur-radius | ぼかしの半径。大きいほどぼけた柔らかい影に | 0 |
spread-radius | 影の拡張・収縮。正で大きく、負で小さくなる | 0 |
color | 影の色。通常は rgba() で透明度指定 | currentColor |
inset | 要素の内側に影を表示するキーワード | なし |
構文
box-shadow: [inset] offset-x offset-y blur-radius spread-radius color;
カンマ区切りで複数の影を指定できます。先に書いたものほど手前に描画されます。
ブラウザ対応状況
主要ブラウザすべてで対応済み（IE9以降）。ベンダープレフィックスは不要です。
- Q. box-shadow はパフォーマンスに影響しますか？
- A. ぼかしの大きなシャドウや多数のレイヤーはレンダリングに負荷がかかります。特にアニメーション中のbox-shadow変更は注意が必要です。代替として
filter: drop-shadow()や事前レンダリングされた画像を検討してください。 - Q. box-shadow と filter: drop-shadow の違いは？
- A.
box-shadowは要素のボックス（矩形）に影を付けます。filter: drop-shadow()は要素の不透明部分の形状に沿った影を作成します（PNG透過部分を考慮）。 - Q. inset はどのような場面で使いますか？
- A. ボタンの押下状態の表現（凹み効果）、入力フィールドの内側の影、ニューモーフィズムデザインの凹形状などに使います。
- Q. 複数の影を重ねるメリットは？
- A. 単一のぼけた影よりも、複数のレイヤーを使うことでより自然でリアルな陰影を表現できます。例えば、近い影（小さいぼかし）と遠い影（大きいぼかし）を重ねると奥行きが生まれます。
- Q. データはサーバーに送信されますか？
- A. いいえ。すべての処理はブラウザ内で完結しています。外部へのデータ送信は一切ありません。
カードUI
商品カードやブログ記事カードに自然な浮遊感を持たせ、視覚的な階層を作ります。
ボタンデザイン
CTAボタンに立体感を与え、hover時に影を変化させることでインタラクティブな体験を演出。
モーダル・ダイアログ
大きなぼかし＋暗い影でモーダルを背景から浮き上がらせ、フォーカスを誘導します。
ニューモーフィズム
ライト/ダーク2色の影を組み合わせた柔らかい3D UIスタイル。近年のSaaSダッシュボードで人気。
- CSS Flexbox/Grid レイアウトジェネレーター
- CSS clip-path ジェネレーター｜ドラッグ操作＆プリセットで直感的に作成
- CSSスプライトアニメーション ジェネレーター｜steps()コード自動生成
- CSSスクロールアニメーション ジェネレーター｜JS不要でスクロール連動
- CSS Clamp計算ジェネレーター｜レスポンシブなフォントサイズを自動生成
- SVG背景パターンCSSジェネレーター｜Data URI変換＆軽量化
- CSSテキストアニメーションジェネレーター｜Reveal効果をコピペで実装
- モダンUI CSSジェネレーター｜グラスモーフィズム対応
- CSS Container Query ジェネレーター｜@containerをGUIで簡単生成
- CSSアニメーションジェネレーター｜@keyframes コード出力
- CSS @property アニメーション ジェネレーター｜CSS変数をアニメーションするGUIツール
- CSSグラデーション＆背景パターンジェネレーター｜コード出力＆プレビュー
- CSS View Transition ジェネレーター | 直感UIで画面遷移アニメを生成
- CSS Filter & Blend ジェネレーター | 画像加工・ブレンドモードを視覚的に生成