データはサーバーに一切送信されません
アカウント不要で即座に利用可能
すべての変更がリアルタイム反映
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 ジェネレーター|ドラッグ操作&プリセットで直感的に作成
- HTTPヘッダー確認 & セキュリティ診断|A+〜Fスコアリング
- CSSスプライトアニメーション ジェネレーター|steps()コード自動生成
- フォントサブセット化ツール|Webフォントを軽量化してサイト高速化
- レスポンシブ画像ジェネレーター|srcset・picture要素のHTMLコードを自動生成
- 最適なECプラットフォーム診断ツール|Shopify・makeshop・EC-CUBE・モール型
- Markdown ⇔ HTML 相互変換ツール|リアルタイムプレビュー付き
- 最適なCMS診断ツール|WordPress・MovableType・ノーコード・ヘッドレスCMS等
- モダンUI CSSジェネレーター|グラスモーフィズム対応
- ホームページ制作/サイトリニューアル費用相場概算シミュレーション
- CSSアニメーションジェネレーター|@keyframes コード出力
- 現在のOS・ブラウザ・IP・画面解像度を一括取得|クライアント環境情報チェッカー
- JSON整形・バリデーター|ツリービュー&YAML変換
- Cron式ジェネレーター&実行スケジュール確認ツール|日本語翻訳・作成
- Webフォントプレビューア|Google Fonts日本語・英語フォント比較
- 構造化データ(JSON-LD)作成ジェネレーター【FAQ・パンくずリスト対応】
- CSSグラデーション&背景パターンジェネレーター|コード出力&プレビュー
- レスポンシブプレビューアー|複数デバイス幅を同時プレビュー
- hreflangタグ ジェネレーター|多言語サイト向け自動生成ツール
- SEO対策
- ネットワーク
- セキュリティ
- 画像処理・テキスト解析
- アスペクト比・画面比率の自動計算ツール|ピクセルサイズを算出
- 文章校正・校正チェッカー|サーバー送信なし・無制限・登録不要
- テキスト差分チェッカー|2つの文章・文字の比較ツール
- 正規表現チェッカー&テスター|電話番号・郵便番号|日本語スニペット・置換対応
- Base64 エンコード&デコード|画像・テキストの双方向変換ツール
- 読む時間・スピーチ所要時間 計算機 プロンプター|文字数から話す時間を算出
- 文字化け復元・エンコーディング変換ツール
- Macの濁点分離を即修復!Unicode正規化ツール(NFC変換)
- 文末重複&漢字比率チェッカー|ライター向け文章校正ツール
- SVG波線&ブロブ(不定形)ジェネレーター|CSSコードも自動生成
- ファビコン作成ツール|favicon変換ジェネレーター
- アプリ不要|インスタ画像サイズ変換(9:16対応)|余白・背景ぼかし
- PDFまとめツール| 結合・分割・抽出|サーバー送信なし
- 全角半角変換|ひらがな・カタカナ/半角カナも一括整形(差分表示)
- ExcelでCSVが文字化けする時の対策|UTF-8 BOM付与・削除&改行変換
- URL解析ツール|クエリ分解・編集+UTM生成(エンコード/デコード対応)
- ダミーテキスト自動生成ツール|Lorem ipsum・日本語対応
- ダミー画像ジェネレーター|プレースホルダー画像作成
- 画像カラーピッカー|写真から色コード抽出・パレット自動生成
- 画像圧縮&WebP一括変換ツール(登録不要・無制限・アップロード不要)
- URL・WifiのQRコード作成・生成・変換ツール(無料・登録不要)
- 無料・会員登録不要の履歴書・職務経歴書PDF作成ツール|スマホ対応
- 文字数カウント・単語数カウント・テキスト解析
- テキスト読み上げ・音声読み上げ(テキストリーダー)|TTS無料ツール(無制限・登録不要)
- SNS・エンタメ
- トーナメント表作成ツール|対戦表&リーグ表を自動生成・自動保存
- 無料ビンゴマシーン|音声読み上げ・カード印刷対応|アプリ不要
- インスタ画像分割ツール|9分割・3分割のプロフィールグリッド投稿に
- OG画像ジェネレーター|SNSシェア用OGP画像を無料作成【1200×630対応】
- ライブ参戦用 うちわ文字&応援ボードメーカー|アプリ不要で即作成
- SNS・EC向け画像リサイズツール|Instagram・Amazon・楽天の推奨サイズに一括変換
- OGP・X(Twitter)カード確認シミュレーター&タグ生成ツール
- アプリ不要!ルーレットメーカー|重み付け・演出付きカスタムルーレット作成
- アプリ不要!BPM測定ツール|タップでテンポ計測・ディレイ計算・メトロノーム
- チーム分けジェネレーター|スキル均等化・制約付きランダムグループ分け