box-shadow生成ツール
CSSのbox-shadowをスライダーで視覚的に調整し、リアルタイムでプレビュー。複数シャドウにも対応。
プレビュー
シャドウ 1
X4px
Y4px
ぼかし10px
拡大0px
色不透明度25%
box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, 0.25);
box-shadow生成ツールの使い方
スライダーでX/Y方向のオフセット、ぼかし、拡大量を調整してください。リアルタイムでプレビューに反映されます。
複数のシャドウを重ねることで、より立体感のある表現が可能です。「シャドウを追加」で重ね掛けできます。
生成されたCSS コードはコピーボタンでクリップボードにコピーし、そのままスタイルシートに貼り付けられます。
おすすめサービス
Canva Pro - デザインツール
デザインプロ品質のデザインを簡単作成。テンプレート豊富で初心者にもおすすめ。
Adobe Creative Cloud
デザインPhotoshop・Illustrator等のプロ向けデザインツール。学割あり。
※ PR・広告を含みます