カラー
Box Shadow
CSSのbox-shadowを見ながらデザイン。
概要
スライダーをドラッグしてbox-shadowをデザイン。ライブプレビューとコピーできるCSSコード付き。
使い方
- x、y、ぼかし、広がりのスライダーをドラッグ。
- 影の色を選んで、内側にしたければinsetをオンに。
- 下のコードをクリックしてCSSをコピー。
例
- カード用に柔らかいドロップシャドウをデザイン。
- ネオブルータリズム風ボタンに4pxオフセットのくっきりした影を作成。
- 押し込まれた感じを出すためにinsetの影を追加。
よくある質問
spread（広がり）って何？
影が要素の端からどれだけ広がるか縮むかを決めます。マイナスの値だと内側に引っ込みます。
ぼかしと広がりの違いは？
ぼかしは端をやわらかくします。広がりはぼかしがかかる前にサイズを変えます。