CSS 阴影生成
可视化生成 box-shadow 投影与 glassmorphism 玻璃拟态 CSS，复制即用。
🔒 浏览器本地处理 · 不上传
阴影颜色
CSS
box-shadow: 0px 10px 25px -5px rgba(27, 27, 31, 0.2);
纯 CSS、实时预览，复制即用。
CSS 阴影生成器让你拖滑块就调出漂亮的 box-shadow 投影，或一键生成当下流行的 glassmorphism 玻璃拟态效果，实时预览、一键复制可直接粘进样式表的 CSS。Shape Cat纯前端、不依赖任何框架。
如何使用 CSS 阴影生成？
- 1选模式：投影 box-shadow 或玻璃拟态 glassmorphism。
- 2拖滑块调偏移、模糊、扩散、颜色、透明度等。
- 3看实时预览效果。
- 4点「复制 CSS」，粘进你的样式表。
为什么用Shape CatCSS 阴影生成？
- 所见即所得：参数一动预览立刻变，不用反复试。
- 两种效果：经典投影 + 趋势玻璃拟态，一个工具搞定。
- 即取即用：输出标准 CSS（含 -webkit 前缀），复制即生效。
常见问题
玻璃拟态为什么我这边不模糊？
玻璃拟态依赖 backdrop-filter，需要元素后方有内容才能看到背景模糊效果，且部分旧浏览器不支持。生成的 CSS 已带 -webkit-backdrop-filter 前缀以提升兼容性。
inset 内阴影是什么？
勾选 inset 会把阴影画在元素内侧，常用于做凹陷、输入框聚焦、按下态等效果；不勾则是常规的外投影。
生成的代码能用在 Tailwind 里吗？
可以。把生成的 box-shadow 值填进 Tailwind 配置的 boxShadow 扩展，或直接用任意值 shadow-[...] 写进 class 即可。
和其它在线 box-shadow 生成器比，有什么不同？
多数老牌生成器只做经典投影、界面陈旧、还夹广告。Shape Cat一个工具同时覆盖经典投影和当下流行的玻璃拟态（含 -webkit 前缀），实时预览、复制即用，纯前端无广告无追踪。要顺手出一段能直接粘的现代阴影 CSS，Shape Cat更省心。
更新于 · Shape Cat团队
来源、审核和限制
最后核验
2026-06-17
作者
Shape Cat editorial desk
审核
Brand asset review
主要来源
- 浏览器的 Canvas 与 SVG 导出 API
- 站内工具维护的配色与排版启发式规则
- 用户输入的品牌名、颜色与 prompt
品牌套件只是创意起点，不构成商标、无障碍或品牌策略方面的建议。正式启用前，请自行确认对比度、字体授权与法律合规。