CSSボックスシャドウ生成
オフセット、ぼかし、広がり、色を調整してボックスシャドウを作成します。
フィードバック
このツールは役に立ちましたか？
概要
オフセット・ぼかし・広がり・色・不透明度を調整しながらCSSボックスシャドウを視覚的にデザインし、生成されたCSSをコピーできます。カードやモーダルの立体感づくりに便利です。
使い方
- 水平・垂直のオフセットを調整します。
- プレビューを見ながら、ぼかし・広がり・色・不透明度を調整します。
- 生成された box-shadow のCSSをコピーします。
使用例
-
カードの立体感
入力: オフセット 0px / 4px、ぼかし 12px、低い不透明度
出力: box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-
フォーカス時のグロー
入力: オフセット0、大きめのぼかし、ブランドカラー
出力: 強調要素用のやわらかい色付きグロー
補足
- ボックスシャドウは見た目だけの効果で、レイアウトには影響しません。
- box-shadow のアニメーションは重くなりがちです。opacity や transform を使ってください。
- 濃く硬い影より、不透明度低めの控えめな影のほうが自然に見えます。
よくある質問
- spread（広がり）は何をする値ですか？
- 正の値はぼかし前に影を全方向へ拡大し、負の値は縮小します。
- 影を複数重ねられますか？
- できます。CSSはカンマ区切りで複数指定できるため、各レイヤーをここで作って手動で結合してください。
- 影は表示性能に影響しますか？
- 静的な影はGPU処理で軽量です。避けるべきは影の頻繁なアニメーションです。
このツールを埋め込む
以下のiframeをHTMLページに貼り付けると、CSSボックスシャドウ生成をあなたのサイトに埋め込めます: