CSSボックスシャドウジェネレーター — プレビューで影を調整
オフセット・ぼかし・広がり・色・insetを調整してCSSのbox-shadowを視覚的に作成し、コードをコピーできます。
🔒 すべてあなたのブラウザ内で動作します。入出力データはサーバに送信・保存されないため安全です。
このツール、役に立った?タップでリアクション
このツールについて
水平・垂直方向のオフセット、ぼかし、広がり、色、insetオプションを設定して、CSSのbox-shadow効果を視覚的に作成できます。結果はライブプレビューで確認可能。気に入ったら、生成された box-shadow コードをそのままスタイルシートにコピーするだけです。すべてブラウザ内で完結します。
よくある質問
box-shadow の各値は何を意味しますか?
順に、水平方向のオフセット、垂直方向のオフセット、ぼかし半径、広がり半径、色を表します。inset を加えると影が要素の外側ではなく内側に描画され、へこんだような表現や押し込まれた見た目に役立ちます。
柔らかく控えめな影にするにはどうすればいいですか?
小さめのオフセットと大きめのぼかし半径、そして不透明度の低い色を使いましょう。数ピクセル下げてぼかしを十分にかけた控えめな影は自然な奥行きに見えますが、くっきりした濃い影は重たい印象になりがちです。
何かサーバーに送信されますか?
いいえ。プレビューも生成されるCSSもすべてブラウザ内で作られるため、作成した内容がアップロード・保存されることはありません。