🌑CSS box-shadow生成
用滑块视觉化构建box-shadow并复制代码。支持多个阴影层,预览即时反映。常用于卡片UI、按钮强调、模态浮起效果、Material Design elevation表现。
🔒 浏览器内处理✓ 无水印✓ 无需注册
使用方法
- 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属性。