CSS 阴影生成器

用滑块实时调节 CSS box-shadow,套用预设并预览,一键复制可用代码。

100% 隐私保护——一切都在浏览器中运行

使用方法

  1. 1

    拖动滑块调整偏移、模糊、扩散、颜色和透明度。

  2. 2

    也可以套用预设,或粘贴已有的 box-shadow 值继续编辑。

  3. 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-[…] 这类任意属性或自定义变量里。

相关工具