CSS ボックスシャドウジェネレーター
ブラウザ内で box-shadow のオフセット、ぼかし、拡散、透明度、角丸、inset を調整し、ライブプレビューと CSS コピーに対応します。
CSS ボックスシャドウジェネレーター
CSS ボックスシャドウジェネレーターは、box-shadow の水平・垂直オフセット、ぼかし、拡散、透明度、角丸、inset をブラウザ内で調整し、カードやボタンの影をリアルタイムで確認できます。
使い方
- 水平オフセット、垂直オフセット、ぼかし、拡散を調整します。
- 影の色、背景色、透明度、角丸を設定します。
- 必要に応じて inset 内側の影へ切り替えます。
- 生成された CSS をコンポーネントのスタイルやデザイン共有メモにコピーします。
特徴
- 主要な box-shadow パラメータを視覚的に調整可能
- 外側の影と inset 内側の影に対応
- ローカルのライブプレビューと CSS コピー出力
使う理由
- カード、ボタン、入力欄、浮遊面の奥行きをすばやく調整できる
- 構文を手書きして何度も確認する手間を減らせる
- デザインと実装で使える CSS 値をそのまま共有できる