影のCSS組み立て
ずれ・ぼかし・広がりを調整して、カードに使える影のCSSを作ります。
使い方
- 横・縦のずれで影の方向を決めます。負の値は左・上、正の値は右・下です。
- ぼかしで輪郭を柔らかくし、広がりで影そのものの大きさを調整します。
- コピーした宣言をカードのCSSルール内に加え、実際の背景上で確認します。
このツールが向いている作業
カードを少し浮かせたいときに、影の方向・輪郭・濃さを分けて調整します。画像加工のドロップシャドウではなく、Web要素に付けるbox-shadow宣言を出力します。
入力と設定
結果
入力例と実際の出力
- 横のずれ（px）: 0
- 縦のずれ（px）: 8
- ぼかし（px）: 24
- 広がり（px）: 0
- 影の色: #000000
- 不透明度（%）: 20
出力例: box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.2);
この例は横にずらさず、下へ8px、ぼかし24px、不透明度20%の黒い影です。広がりを負にすると小さく締まった影になります。プレビュー領域の外へ出る大きな影は切れる場合があります。
仕様と注意点
1層の外側の影を出力します。結果はbox-shadowの宣言として貼り付けられます。
次の作業・使い分け
ボタンのCSS下ごしらえ — 同じ画面に置くボタンの色・角丸・余白を組み立てられます。
よくある質問
ぼかしと広がりはどう違いますか？
ぼかしは境界の柔らかさ、広がりは影の範囲を変えます。輪郭を保って影を大きくしたい場合は、ぼかしより広がりを調整します。
内側の影や複数の影は作れますか？
このツールは1層の外側の影を作ります。insetや複数指定は出力したCSSを編集して追加してください。
プレビューで影が途中で切れるのはなぜですか？
影がプレビュー領域の外へ広がると、その領域で切れる場合があります。出力したCSSを実際の背景とレイアウトでも確認してください。
関連ツール
ツールを紹介
ツール名と公開URLだけを共有します。入力した内容や処理結果は含まれません。