跳转到内容

CSS 阴影生成器

创建平滑的多层盒阴影,调整外观并导出 CSS。

CSS代码
box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1), 0px 4px 8px 0px rgba(0, 0, 0, 0.1);
层数

图层 1

图层 2

全局预览设置
背景颜色
图层设置
偏移 X:0px
Y 偏移:1px
模糊:3px
点差:0px
不透明度:10%
颜色
插图

即用型预设

软滴
中等海拔
高浮力
清晰的边框
复古块
内部深度
发光
平滑层
深层

终极 CSS 阴影生成器

使用我们的 CSS 盒子阴影生成器 掌握深度艺术。无论您是构建 Neumorphism 界面、干净的 SaaS 仪表板还是 Material Design 卡,分层阴影都是专业外观的关键。

什么是平滑阴影?

“平滑阴影”或 分层阴影 是通过在单个元素上堆叠多个 box-shadow 规则来创建的。单个阴影通常会产生尖锐的人造边缘。通过使用 4、6 甚至 8 层阴影并增加模糊半径和降低不透明度,您可以模拟真实的光漫射(环境光遮挡)。

用例和关键词

对于开发人员

无需编写手动代码即可调试并生成复杂的 CSS3 盒子阴影。非常适合 React、Vue 和 Angular 项目。

对于设计师

将 Figma 效果翻译到网络。创建 软用户界面 元素、发光效果 和自定义顺风阴影实用程序。