CSSボックスシャドウ生成ツール
スライダーでbox-shadowを直感的に生成します。X・Y・ぼかし・広がり・色・不透明度・インセットをリアルタイムでプレビュー。
#ffffff
4px
4px
16px
0px
0.2
#000000
生成されたCSS
box-shadow: 4px 4px 16px 0px rgba(0, 0, 0, 0.2);
CSSボックスシャドウ生成ツールの使い方
1. スライダーを動かしてシャドウのX・Y・ぼかし・広がり・不透明度を調整します。
2. カラーピッカーでシャドウの色を選択します。
3. 「inset」チェックで内側シャドウに切り替えられます。
4. 「+ 追加」で複数のシャドウを重ねることができます（最大4つ）。
5. 「コピー」ボタンでCSSコードをクリップボードにコピーできます。
おすすめサービス
Canva Pro - デザインツール
デザインプロ品質のデザインを簡単作成。テンプレート豊富で初心者にもおすすめ。
Adobe Creative Cloud
デザインPhotoshop・Illustrator等のプロ向けデザインツール。学割あり。
※ PR・広告を含みます