CSS box-shadow生成
オフセット・ぼかし・広がり・色・不透明度を見ながら調整して、CSSを持ち出せます。影を重ねて自然な奥行きを出すプリセットも入っています。
🎨 すべてブラウザ内で動きます。インストールも登録も不要です。
横位置0px
縦位置8px
ぼかし20px
広がり-4px
不透明度20%
box-shadow: 0px 8px 20px -4px rgba(15, 23, 42, 0.20);
自然な影はたいてい真下にわずかに落ち（横位置0）、色は黒ではなく背景より少し暗い紺系を薄く使います。純粋な黒の影は濁って見えます。
このツールでできること
- オフセット・ぼかし・広がり・色
- inset（内側の影）対応
- 多重影の自然なプリセット
- CSSをコピー
ほかのカラーツール
画面とそのカラープロファイルによって、色は少し違って見えることがあります。