🧰業務効率化
CSSボックスシャドウ作成
影をプレビューしながらbox-shadowを生成
- ✓ 無料
- ✓ 登録不要
- ✓ ブラウザだけで動作
- ✓ データ送信なし
ファイルや入力内容は、原則としてお使いのブラウザ内で処理されます。
スライダーを動かし、カードやボタンに使う影を実物に近い状態で調整できます。入力値はブラウザー内だけで処理し、送信・保存しません。
1. 影の雰囲気を選ぶ
2. 数値と色を調整
3. プレビュー
カードの見出し
影の強さや広がりを、背景色との組み合わせで確認できます。
4. CSSコードをコピー
調整するときのポイント
- 影を強くしすぎると、情報より装飾が目立ちやすくなります。実際のページ背景で確認してください。
- ぼかしを大きくするほど広い範囲に影が表示されます。周囲の要素との間隔も確認してください。
- 影だけでボタンや入力欄の状態を伝えず、枠線・文字・形なども組み合わせてください。