CSS Box Shadowジェネレーター
スライダーを動かして、CSSのbox-shadowを視覚的に作成できます。複数レイヤーの影を重ねたり、プリセットから選択することも可能です。
プレビュー
8px
シャドウレイヤー(1/4)
レイヤー 1
0px
4px
6px
0px
10%
プリセット
CSSコード
CSS
box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.10);
Tailwind CSS
Tailwind CSS クラス
shadow-[0px_4px_6px_0px_rgba(0,_0,_0,_0.10)]
CSS box-shadow とは
CSSのbox-shadowプロパティは、要素に影（ドロップシャドウ）を付けるためのスタイル指定です。 カードUI、ボタンの浮き上がり効果、ニューモーフィズムデザインなど、 Webデザインにおいて立体感や奥行きを表現するために広く使われています。
このツールでは、スライダーを操作しながらリアルタイムでプレビューを確認でき、 CSSコードとTailwind CSSのクラスをワンクリックでコピーできます。
box-shadow の構文
box-shadow: [inset] <offset-x> <offset-y> <blur-radius> <spread-radius> <color>;| 値 | 説明 | 例 |
|---|---|---|
| inset | 影を要素の内側に描画（省略時は外側） | inset |
| offset-x | 水平方向のオフセット（正で右、負で左） | 4px |
| offset-y | 垂直方向のオフセット（正で下、負で上） | 4px |
| blur-radius | ぼかしの半径（大きいほどぼやける） | 10px |
| spread-radius | 影の広がり（正で拡大、負で縮小） | 0px |
| color | 影の色（rgba で透明度指定が一般的） | rgba(0,0,0,0.1) |
よく使われるシーン
- カードUIの浮き上がり効果（Material Design のelevation）
- ボタンの押下感・ホバー時の浮遊感
- ニューモーフィズム（Neumorphism）デザイン
- テキストや画像の強調表示
- モーダル・ポップアップの背景との分離
- ナビゲーションバーやヘッダーの固定表示時の区切り
関連記事
よくある質問
- Q. box-shadowのプロパティの意味は？
- box-shadowはoffset-x（水平方向）、offset-y（垂直方向）、blur-radius（ぼかし）、spread-radius（広がり）、color（色）の5つの値で構成されます。insetキーワードを追加すると内側の影になります。
- Q. 複数の影を重ねることはできますか？
- はい、最大4レイヤーまで影を重ねることができます。複数の影を組み合わせることで、よりリアルで立体感のあるデザインを実現できます。
- Q. Tailwind CSSのクラスも出力できますか？
- はい、CSSコードに加えてTailwind CSSのarbitrary値クラスも出力します。プロジェクトの技術スタックに合わせてお使いください。
関連ツール
開発者
Zeronova（ゼロノバ）
Product Manager / AI-Native Builder
19年以上のWeb/IT業界経験を持つPdMが、現場で本当に使えるツールを開発。登録不要・ブラウザだけで動作する無料ツールを93種類以上公開中。