CSS box-shadow 生成
要素の影（box-shadow）をプレビューを見ながらスライダーで作成。生成したCSSはコピー可能です。
このツールについて
CSSの「box-shadow」をスライダー操作で直感的に生成できるツールです。オフセットやぼかし具合、広がりを視覚的に調整でき、複数シャドウの重ね合わせにも対応。カードの浮き上がりやボタンの立体感作りに活躍します。
「カードデザインにいい感じの影をつけたいけれど、box-shadowの数値指定をいつも忘れてしまう…」──そんな方におすすめです。X/Y軸のズレやぼかし（blur）、広がり（spread）をスライダーで動かすだけで、リアルタイムに影のプレビューが更新されます。複数の影を重ねたリッチな表現も簡単に作成でき、お好みの影ができたらCSSをそのままコピーして使うだけです。
ツール操作
各パラメータの意味
X/Y offset＝影のずれ方向、Blur＝ぼかし、Spread＝広がり、色・不透明度＝影の見た目。スライダーを動かすとプレビューが即時反映されます。
15%
影がここに表示
使い方
- オフセット、ぼかし、広がり、色をスライダーで調整します
- プレビューで影の見た目を確認します
- 生成されたCSSをコピーしてプロジェクトに貼り付けます。複数シャドウも追加可能です
いつ使うか
カードの浮き上がり効果、ボタンの押下感、モーダルの影、立体感の演出に。
使用例
0 4px 6px -1px rgba(0,0,0,0.1)、0 10px 15px -3px rgba(0,0,0,0.1)
よくある質問
box-shadowの書き方は？
box-shadow: オフセットX オフセットY ぼかし 広がり 色; の順。例: 0 4px 6px rgba(0,0,0,0.1) で下に4px、6pxぼかしの影。insetを付けると内側の影になります。
複数シャドウの指定方法は？
カンマで区切って複数指定できます。例: box-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.05); 先に書いた方が手前に表示されます。
box-shadowとdrop-shadowの違いは？
box-shadowは要素の四角形に影。filter: drop-shadow()は要素の形（透明部分を除く）に沿った影。アイコンや不規則な形にはdrop-shadowが適しています。
影のぼかしと広がりの違いは？
ぼかし（blur）は影の端を柔らかくする効果。広がり（spread）は影のサイズを拡大・縮小します。負の広がりで影を小さくできます。
box-shadow生成ツールの使い方は？
オフセット、ぼかし、広がり、色をスライダーで調整。プレビューを確認しながら生成されたCSSをコピーできます。
カードの浮き上がり効果は？
0 4px 6px -1px rgba(0,0,0,0.1) など。このツールでオフセットとぼかしを調整して作成できます。
insetの影とは？
内側の影。要素の内側に落ちる影で、凹んだ表現に。このツールでinsetオプションを選択できます。
モーダルの影は？
0 10px 15px -3px rgba(0,0,0,0.1) など大きめのぼかし。このツールで調整してモーダル用の影を作れます。
影の色は透明に？
rgba(0,0,0,0.1) のようにalphaで透明度を指定。黒で薄くするのが一般的です。
box-shadowのCSSをコピーするには？
このツールで調整後、生成されたCSSをワンクリックでコピー。プロジェクトにそのまま貼り付けられます。
CSS box-shadow 生成は無料ですか？
無料・登録不要で利用できます。
入力データはサーバーに送られますか？
データは端末内で処理され、当サイトのサーバーには保存されません。
対応ブラウザは？
Chrome、Edge、Firefox、Safari の最新版で動作確認しています。
オフラインで使えますか？
オフラインでも基本機能は動作します（初回読み込み後）。
CLIやデスクトップアプリとの違いは？
CSS box-shadow 生成は、コマンドラインやデスクトップアプリの代替として、インストール不要ですぐ使えるオンラインツールです。
いつ使うツール？
こんなときに使います: カードの浮き上がり効果、ボタンの押下感、モーダルの影、立体感の演出に。
使用例は？
具体例: 0 4px 6px -1px rgba(0,0,0,0.1)、0 10px 15px -3px rgba(0,0,0,0.1)
主な機能は？
ビジュアルで影を調整、複数シャドウ対応、CSSコピー
他の類似ツールとの使い分けは？
CSS box-shadow 生成はブラウザ完結・インストール不要が強みです。CLIやIDE拡張と併用し、手元ですぐ試したいときに使うのが効率的です。
検索キーワード・別名
影、box-shadow、CSS、カード、デザイン、影 作り方
基本的な使い方（ワークフロー）
- オフセット、ぼかし、広がり、色をスライダーで調整します
- プレビューで影の見た目を確認します
- 生成されたCSSをコピーしてプロジェクトに貼り付けます。複数シャドウも追加可能です
具体的な使用シーン
- カードの浮き上がり効果、ボタンの押下感、モーダルの影、立体感の演出に。
- CSSの「box-shadow」をスライダー操作で直感的に生成できるツールです。オフセットやぼかし具合、広がりを視覚的に調整でき、複数シャドウの重ね合わせにも対応。カードの浮き上がりやボタンの立体感作りに活躍します。
- ビジュアルで影を調整
- 複数シャドウ対応
プライバシーとデータの扱い
データは端末内で処理され、当サイトのサーバーには保存されません。
注意点
- コピーした結果を本番環境にそのまま貼る前に必ず再確認する
- ブラウザ拡張機能がページ動作を妨げる場合はシークレットウィンドウで試す
- 大量データ入力時はタブを閉じずに処理完了を待つ
関連する学習コンテンツ
関連ツール
ツールセット
色・デザインセット