CSS 阴影生成器
用滑块实时调节 CSS box-shadow,套用预设并预览,一键复制可用代码。
100% 隐私保护——一切都在浏览器中运行
使用方法
- 1
拖动滑块调整偏移、模糊、扩散、颜色和透明度。
- 2
也可以套用预设,或粘贴已有的 box-shadow 值继续编辑。
- 3
复制生成的 CSS,粘贴到你的样式表里即可。
示例
卡片投影
输入
0 8px 24px -4px rgba(15,23,42,.18)输出
box-shadow: 0 8px 24px -4px rgba(15,23,42,.18);霓虹发光
输入
0 0 24px 2px rgba(99,102,241,.45)输出
box-shadow: 0 0 24px 2px rgba(99,102,241,.45);常见问题
扩散(spread)是什么作用?
它在模糊之前整体放大或缩小阴影范围,负值会让阴影更紧凑。
为什么内阴影看起来不一样?
内阴影画在元素内部,视觉上像是凹陷或被压下的表面。
能用在 Tailwind 里吗?
可以,把复制的值放进 shadow-[…] 这类任意属性或自定义变量里。