box-shadowジェネレーター
box-shadowジェネレーターは、CSSの影をサンプルから選び、数値を調整しながらbox-shadowを作成できる無料ツールです。
作成したCSSや調整内容は、サーバーに送信・保存されません。ブラウザ上でプレビューして、その場でコピーできます。
主な機能
- box-shadowをサンプルから選択
- X方向、Y方向、ぼかし、広がりを調整
- 影の色と透明度を変更
- 内側シャドウに対応
- サンプルのボックス色を変更
- ライブプレビューを見ながら調整
- 生成されたCSSをコピー
できること
影の雰囲気を選べる
囲み枠、ボタン、カード、ポップアップなどに使いやすい影をサンプルから選べます。ゼロから数値を考えなくても、近い雰囲気から調整できます。
数値を細かく調整できる
X方向、Y方向、ぼかし、広がり、色、透明度を調整できます。内側シャドウにも対応しているため、へこんだ表現も作れます。
プレビューしてコピーできる
実際の見た目を確認しながら調整し、完成したCSSをコピーできます。背景やパーツの色に合わせて影の強さを確認しやすいです。
使う前のチェック
- 影が強すぎて文字や周囲の要素を邪魔していないか確認してください。
- 背景色が暗い場合は、影が見えにくくなることがあります。
- 複数の影を重ねると、デザインが重く見える場合があります。
安心して使うために
調整内容は、ブラウザ内だけで反映されます。サーバーに送信・保存されません。
