CSSボックスシャドウ生成

スライダーでbox-shadowを調整してCSSコードを生成。

無料ブラウザ完結データ送信なし

使い方

1

スライダーで調整

オフセット・ぼかし・色を調整。

2

リアルタイムプレビュー

プレビューで結果を確認。

3

コードをコピー

CSSコードをコピーして使用。

よくある質問

複数の影を重ねられますか?

現在は1つの影に対応しています。複数重ねたい場合はコードを手動でカンマ区切りで追加してください。

insetとは何ですか?

insetを指定すると外側ではなく内側に影が付きます。凹んだような見た目になります。

CSSボックスシャドウ生成ツールとは

CSSのbox-shadowプロパティをGUI操作で簡単に生成できるツールです。影の方向・ぼかし・色・透明度をリアルタイムに調整でき、生成されたコードをそのままCSSに貼り付けて使えます。