CSS 阴影生成器 —— box-shadow 与玻璃拟态
CSS 阴影生成器让你拖滑块就调出漂亮的 box-shadow 投影，或一键生成当下流行的 glassmorphism 玻璃拟态效果，实时预览、一键复制可直接粘进样式表的 CSS。Shape Cat纯前端、不依赖任何框架。
CSS 阴影生成是Shape Cat的免费在线工具，全程在你的浏览器本地完成：打开即用、做完即下载。文件不上传服务器，无需注册、无次数限制。
box-shadow: 0px 10px 25px -5px rgba(27, 27, 31, 0.2);
纯 CSS、实时预览，复制即用。
如何使用 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
主要来源
- Browser Canvas and SVG export APIs
- Color and typography heuristics maintained in the site tools
- User-entered brand names, colors and prompts
Brand kits are creative starting points, not trademark, accessibility or brand-strategy advice. Test contrast, licensing and legal clearance before launch.