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 效果翻译到网络。创建 软用户界面 元素、发光效果 和自定义顺风阴影实用程序。