無料WEBツールdigtoooooools

by 大阪のホームページ制作会社digrart

CSS box-shadow ジェネレーター｜複数レイヤー・プリセット対応

📖 概要🔰 使い方📚 プロパティ解説❓ FAQ💡 活用シーン
🔒
ブラウザ内処理

データはサーバーに一切送信されません

📝
登録不要

アカウント不要で即座に利用可能

⚡
即時プレビュー

すべての変更がリアルタイム反映

X オフセット4px
Y オフセット4px
ぼかし12px
広がり0px
透明度15%
要素の幅200px
要素の高さ150px
角丸12px
背景色
要素の背景色
🌈 CSSグラデーション✂️ CSS clip-path🎨 カラーコード変換🔍 コントラストチェッカー

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ダッシュボードで人気。

WEB開発ツール
SEO対策
ネットワーク
セキュリティ
画像処理・テキスト解析
ビジネス
SNS・エンタメ
生活