CSS シャドウジェネレーター
box-shadow パラメータをビジュアルで調整、リアルタイムプレビューしながら CSS コードをワンクリックコピー。完全無料・オンライン。
すべての処理はブラウザ内で完結します — サーバーへのアップロードはありません
水平偏移4px
垂直偏移4px
模糊半径12px
扩展半径0px
透明度20%
box-shadow: 4px 4px 12px 0px rgba(0, 0, 0, 0.20);よくある質問
生成された CSS は本番で使えますか?
使えます。W3C 標準に準拠し、主要なモダンブラウザ(IE9+ 含む)で動作します。.css ファイル、インライン style、styled-components にそのまま貼り付け可能です。
複数レイヤーの影に対応していますか?
対応しています。カンマ区切りで無制限に重ねられ、各レイヤーで色・ぼかし・拡がり・X/Y オフセット・inset を個別に調整可能。ニューモーフィズム、グラスモーフィズム、立体ボタンに最適です。
ダークモードで影が目立たないときは?
暗い背景では黒い影はコントラストが弱まります。低透明度の白い影(例: `rgba(255,255,255,0.1)`)で光彩風にするか、彩度を落としたブランドカラーで奥行きを残す方法を試してください。