🌫️ CSS ボックスシャドウ生成ツール

オフセット・ぼかし・広がり・色・不透明度・insetをスライダーで調整し、リアルタイムプレビューで影をデザインするツールです。完成したbox-shadowのCSSをそのままコピーできるので、Webデザイナーやフロントエンド開発者がカードやボタンの影をすばやく作るのに便利です。

使い方

1. スライダーで横・縦のオフセット、ぼかし（blur）、広がり（spread）、不透明度を調整します。
2. 影の色を選び、必要なら inset（内側の影）をオンにします。
3. プレビューボックスで結果を確認します。
4. 生成された box-shadow コードをコピーして使います。

よくある質問

inset とは何ですか？

inset をオンにすると、影が要素の外側ではなく内側に入り、へこんだように見える効果を作れます。入力欄や押されたボタンの表現によく使われます。

影を複数重ねられますか？

このツールは1つの影を作成します。複数必要な場合は、生成された値をカンマでつないで box-shadow に複数指定すればまとめられます。

入力した値はサーバーに保存されますか？

いいえ。プレビューとCSSの生成はすべてブラウザ内で処理され、どの値もサーバーに送信されることはありません。