Box Shadowジェネレーター
リアルで美しいドロップシャドウを作成
Box
CSS Code
影の設定
10px
10px
20px
0px
30%
プレビュー環境
Box Color
Bg Color
実際の使用例
ソフトシャドウ
柔らかい影
INPUT
10px 10px 20px 0px rgba(0,0,0,0.1)
OUTPUT
box-shadow: 10px 10px 20px 0px rgba(0,0,0,0.1);
ハードシャドウ
漫画的な硬い影
INPUT
5px 5px 0px 0px #000000
OUTPUT
box-shadow: 5px 5px 0px 0px #000000;
よくある質問
このツールでは現在、単一の影のみに対応しています。複数の影が必要な場合は、生成されたコードをカンマ区切りで組み合わせてください。
過度に大きなBlur値やSpread値、多数の影の重ね合わせは、ページの描画パフォーマンス(特にスクロール時)に影響を与える可能性があります。モバイル向けには控えめな設定が推奨されます。
役立つTips
ニューモーフィズム
背景色と同じ色のボックスを用意し、明るい影と暗い影を組み合わせると、凹凸のある柔らかいデザイン(ニューモーフィズム)が作れます。
マテリアルデザイン
Googleのマテリアルデザインのような浮遊感を出すには、垂直方向の移動(Y軸)とぼかし(Blur)を大きめに設定し、Spreadを小さく(またはマイナスに)するのがコツです。