CSS 阴影生成器

可视化调整阴影参数,支持多层叠加,一键复制可直接使用的 CSS。

反馈
阴影层设置
预览与输出
预览
预览背景
预览区块
阴影文字预览
CSS 输出
1
选择阴影类型

使用上方工具栏在 Box Shadow(元素外框阴影)与 Text Shadow(文字阴影)之间切换。

2
调整每一层参数

拖动滑块改变偏移、模糊与颜色透明度;Box Shadow 另有扩张半径与内阴影(inset)选项。

3
叠加多层阴影

点「新增阴影层」可加入多组值,输出的 CSS 会以逗号连接,越靠前的层在视觉上越靠近外侧。

4
复制并应用

确认预览后点「复制 CSS」,粘贴到样式表或组件样式区域即可。

小提示:预览背景色仅用于对比,不会写入输出的 CSS。

box-shadow 和 text-shadow 有什么区别?
box-shadow 作用在元素外框(整个区块、按钮等),text-shadow 作用在文字笔画上。前者可设置 inset 与 spread,后者不支持这两项。
可以同时叠加多层阴影吗?
可以。CSS 允许用逗号分隔多组阴影,越写在前面的会叠在较外侧。你可以重复新增层并实时看到合成效果。
inset 是什么?
勾选 inset 后,阴影会绘制在元素内侧,常见于按钮下凹或内嵌阴影效果。text-shadow 没有 inset。
spread 负值有什么用?
负的 spread 会缩小阴影范围,若再搭配较大的位移,可做出更利落的单侧投影。
复制后要贴在哪里?
可贴到一般 .css 文件、框架的样式区域,或浏览器开发者工具的 Styles。若使用 CSS-in-JS,也可把属性拆到 style 对象中使用。
图片压缩 迷因图 社群营销
2026-05-17

线上图片压缩/编辑工具:一键制作高画质迷因与社群贴文视觉指南

想制作爆款迷因图与社群贴文,却受限于图片容量过大、尺寸不合与色彩黯淡?本文教你如何透过线上图片压缩与色彩转换工具,一键优化图片画质,打造吸睛的社群视觉体验。

编码 Base64 URL编码
2026-06-23

编码标准与传输机制:解析字符编码、Base64 与 URL 安全性

深入探讨字符编码如何影响网络通讯,剖析 Base64 的实际用途与 URL 编码的底层规则,协助开发者解决跨平台传输的乱码难题。

技术文档 Markdown API 文档
2026-05-11

技术文档撰写完整指南:Markdown 格式规范、API 文档化与工程师写作最佳实践

好的代码需要好的文档。但工程师往往把写文档当成最后一件事,导致接手的人一头雾水。本文从 README 到 API 文档,整理技术文档的分类、Markdown 撰写规范、常见格式错误,以及让文档保持更新的工程实践。

Markdown 写作工具 前端开发
2026-03-23

Markdown 语法完全指南:从入门到实战应用

Markdown 是现代写作者、开发者与内容创作者最常用的轻量级标记语言。本文从语法基础到进阶技巧,完整解析 Markdown 的使用方式与各平台应用实战。

文件格式 数字化工作流 兼容性
2026-06-20

文件格式转换的结构化思维:从底层编码到跨平台兼容性优化

深入探讨文件格式转换背后的底层逻辑,解析如何通过结构化思维解决跨系统兼容性难题,并提供高效的转换策略。

轮播 信息看板 Carousel
2026-04-27

信息看板制作完整指南:轮播展示、公告设计与活动宣传的视觉技巧

一个版面要同时放公告、活动图和品牌信息?轮播看板是最省空间的解法。本文整理信息看板的三种内容模式、切换速度设定原则、文字可读性技巧,以及公告栏、活动宣传、演示展示等实用场景,搭配免费在线工具让你不需写代码,5 分钟内完成专业看板。