🌑CSS box-shadow生成
スライダーでbox-shadowを視覚的に作成、コードコピー。複数シャドウレイヤー対応、リアルタイムプレビュー。
🔒 ブラウザ内処理✓ ウォーターマークなし✓ 登録不要
使い方
- 1スライダーでX/Yオフセット、ブラー、拡散、色、不透明度を調整します。
- 2+ボタンで影レイヤーを追加します。
- 3生成されたCSSをコピーします。
よくある質問
insetシャドウも作れますか?+
はい。各レイヤーごとに『inset』をオンに切り替えられます。insetは内側の影(へこんだ印象)を作ります。
自然な影のコツは?+
(1)Yオフセットのみ、Xは0、(2)ブラーをオフセットの2倍、(3)alpha 0.1〜0.3、(4)色は真っ黒より濃いグレーが自然です。
なぜ複数レイヤーが必要ですか?+
現実の光は複数の方向から来ます。近くの小さな影+遠くの大きな影を重ねることで自然な立体感が生まれます。
パフォーマンスへの影響は?+
静的な影はほぼ影響ありません。ただしモバイルではブラーの大きな影が多いとGPU負荷が増える可能性があります。
Tailwind CSSの影と比べて?+
Tailwindのshadow-sm/md/lg/xl/2xlは公式のプリセット影セットです。カスタム影が必要な時にこのツールで作成して使用してください。
文字にも影を付けられますか?+
box-shadowはボックス用です。文字の影はtext-shadowプロパティを別途使う必要があります。