CSS box-shadow生成

CSS box-shadow ジェネレーター

操作手順
  1. 各スライダーで値を調整すると、プレビューボックスにリアルタイムで影が反映されます。
  2. 下部の CSS 出力欄からコピーしてそのままスタイルシートに貼り付けられます。
機能・特徴
  • offsetX / offsetY / blur / spread をスライダーで直感的に調整
  • カラーピッカーと不透明度スライダーで rgba() を自動生成
  • inset スイッチで内側/外側シャドウを切り替え

水平オフセット (offsetX): 4px

垂直オフセット (offsetY): 4px

ぼかし (blur): 10px

広がり (spread): 0px

不透明度: 0.3