CSS 阴影生成器 —— box-shadow 与玻璃拟态
CSS 阴影生成器让你拖滑块就调出漂亮的 box-shadow 投影，或一键生成当下流行的 glassmorphism 玻璃拟态效果，实时预览、一键复制可直接粘进样式表的 CSS。设计猫纯前端、不依赖任何框架。
阴影颜色
CSS
box-shadow: 0px 10px 25px -5px rgba(27, 27, 31, 0.2);
纯 CSS、实时预览，复制即用。
如何CSS 阴影生成？
- 1选模式：投影 box-shadow 或玻璃拟态 glassmorphism。
- 2拖滑块调偏移、模糊、扩散、颜色、透明度等。
- 3看实时预览效果。
- 4点「复制 CSS」，粘进你的样式表。
为什么用设计猫CSS 阴影生成？
- 所见即所得：参数一动预览立刻变，不用反复试。
- 两种效果：经典投影 + 趋势玻璃拟态，一个工具搞定。
- 即取即用：输出标准 CSS（含 -webkit 前缀），复制即生效。
常见问题
玻璃拟态为什么我这边不模糊？
玻璃拟态依赖 backdrop-filter，需要元素后方有内容才能看到背景模糊效果，且部分旧浏览器不支持。生成的 CSS 已带 -webkit-backdrop-filter 前缀以提升兼容性。
inset 内阴影是什么？
勾选 inset 会把阴影画在元素内侧，常用于做凹陷、输入框聚焦、按下态等效果；不勾则是常规的外投影。
生成的代码能用在 Tailwind 里吗？
可以。把生成的 box-shadow 值填进 Tailwind 配置的 boxShadow 扩展，或直接用任意值 shadow-[...] 写进 class 即可。
更新于 · 设计猫团队