box-shadow / border-radius 生成
CSSの影（box-shadow）と角丸（border-radius）をスライダーで調整。プレビューとCSSコードにリアルタイムで反映されます。影は最大4つまで重ねられます。
影（最大4つ）
角丸（border-radius）
box-shadowの各値の意味
- Xオフセット: 影を水平方向にずらす距離。正の値で右、負の値で左に移動します。
- Yオフセット: 影を垂直方向にずらす距離。正の値で下、負の値で上に移動します。
- ぼかし（blur-radius）: 影の輪郭をぼかす量。大きいほど柔らかくふんわりした影になり、0だと輪郭がくっきりします。
- 広がり（spread-radius）: 影のサイズを拡大・縮小する量。正の値で影が要素より大きく、負の値で小さくなります。
- 色と不透明度: 影の色は通常
rgba()で指定します。不透明度を下げるほど背景になじむ自然な影になります。 - inset: 指定すると影が要素の外側ではなく内側に落ち、くぼんだような表現になります。
複数の影を重ねる
box-shadowはカンマ区切りで複数指定でき、先に書いた影ほど手前に表示されます。「近くの濃い影＋遠くの薄い影」を重ねると、奥行きのある自然な立体感を作れます。
border-radiusについて
4隅をまとめて1つの値で指定するほか、「左上 右上 右下 左下」の順に個別指定もできます。高さの半分以上の値を指定すると、辺が完全な半円になります。