阴影 CSS 在你的浏览器本地生成,不会上传。
CSS 阴影生成器
构建一个或多个 CSS 盒子阴影,调整偏移、模糊、扩展、内阴影、颜色和透明度,然后复制生成的 CSS。
阴影 CSS 在你的浏览器本地生成,不会上传。
叠加生成盒子阴影
阴影预览
用于卡片、按钮与界面层次的 CSS 阴影
无论是卡片、面板、按钮、弹窗、产品样机还是界面实验,想要精致的阴影又不想手写每个数值时,都可以用这个 CSS 阴影生成器。
所有控件都在你的浏览器本地运行。叠加多层阴影、调整顺序、设置预览背景,满意后复制一段有效的 box-shadow 声明。
如何使用这个工具
-
调整第一层阴影
设置 X 偏移、Y 偏移、模糊、扩展、颜色、透明度和内阴影选项。
-
叠加更多阴影
添加更多阴影并调整顺序,营造层叠的立体感。
-
复制 CSS
预览效果,把生成的 box-shadow 声明复制到你的样式表中。
常见问题
这个阴影生成器会上传内容吗?
不会。CSS 在你的浏览器本地生成。
可以创建多层阴影吗?
可以。在复制最终 CSS 前添加叠加阴影并调整顺序。
支持内阴影吗?
支持。每层阴影都有独立的内阴影开关。
它输出什么 CSS?
输出是一段 box-shadow 声明,可直接粘贴到 CSS 中。