このツールについて
1層のボックスシャドウを生成するツールです。水平・垂直オフセット、ぼかし半径、広がり半径、色、不透明度、insetを設定できます。有効な値はすぐにプレビューのカードに反映されます。
使い方
- 水平・垂直オフセットとぼかし半径を調整します。
- 広がり半径、影の色、不透明度を設定します。
- 必要に応じて「内側の影（inset）」を有効にします。
- プレビューを確認してCSSをコピーするか、リセットして既定の影に戻します。
使用例
- 水平オフセットを負にすると、影が左に移動します。
- 広がり半径が正なら影が大きくなり、負なら小さくなります。
- insetを有効にすると、ボックスの内側に影が付きます。
box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.25);仕組みとCSSの解説
box-shadowにはoffset-x、offset-y、blur-radius、spread-radius、colorを順に指定し、insetを追加できます。オフセットと広がりは負の値も使えますが、ぼかし半径は0以上にする必要があります。不透明度は、影と背景が混ざる度合いを調整します。
主な用途
- パネル、ダイアログ、ボタンに奥行きを付ける。
- 柔らかい影と輪郭のはっきりした影を比較する。
- フォーム要素に内側の影を付ける。
プライバシーについて
入力、計算、CSSの生成、プレビューはすべてお使いのブラウザー内で完結します。入力内容をアップロードせず、バックエンド、データベース、オンラインAPI、外部CDNも使用しません。入力の自動保存も行いません。
FAQ
blurとspreadの違いは何ですか？
blurは輪郭のぼかし具合を調整します。spreadはぼかす前の影の形を、どれだけ大きくするか、または小さくするかを調整します。
insetとは何ですか？
ボックスの外側の影を、内側の影に切り替える指定です。
box-shadowで負の値は使えますか？
水平オフセット、垂直オフセット、広がりには使えます。ぼかし半径には使えません。
複数の影を重ねられますか？
このページでは1層の影を生成します。CSS自体は、カンマ区切りで複数のbox-shadowを指定できます。