Developer Tools
Web Utilities
Image ToolsCSS阴影生成器
可视化创建多层CSS box-shadow效果，实时预览。自定义模糊、扩展、颜色和不透明度。
阴影设置
层 1
预览和CSS代码
.box-element {
box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.3);
background-color: #ffffff;
border-radius: 8px;
}0px 4px 6px 0px rgba(0, 0, 0, 0.3)相关工具
关于此工具
工作原理
- 可视化创建多层CSS box-shadow效果
- 调整水平和垂直偏移以定位阴影
- 控制模糊半径和扩展以调整软度和大小
- 使用不透明度控制自定义阴影颜色
- 添加inset阴影以实现内部发光效果
- 叠加多个阴影以创建复杂的深度效果
常见使用场景
- 在卡片设计中创建深度和高度
- 为按钮和UI元素添加微妙阴影
- 设计新拟态（软UI）界面
- 为行动呼吁元素构建发光效果
- 实现材料设计阴影规范
- 创建浮动和抬起的元素效果
常见问题
CSS中的box shadow是什么？
box shadow是一个CSS属性，可以在元素框架周围添加阴影效果。它允许您通过可以定位、模糊、扩展和着色的阴影在设计中创建深度和高度。
如何添加多个阴影层？
点击'+ 添加层'按钮为元素添加更多阴影层。每层可以独立自定义不同的位置、模糊、扩展、颜色和不透明度。
每个阴影参数控制什么？
水平偏移将阴影向左（负值）或向右（正值）移动。垂直偏移将其向上（负值）或向下（正值）移动。模糊半径控制阴影的软硬程度。
什么是inset阴影？
inset阴影绘制在元素边框内部而非外部。它创造出元素被按压到表面的外观。勾选任何阴影层上的'Inset'复选框使其成为inset阴影。
如何创建新拟态（软UI）效果？
新拟态使用两个阴影：一个浅色一个深色，位于相反的两侧。使用'新拟态'或'新拟态 Inset'预设作为起点。
可以使用负扩展值吗？
可以！负扩展值在应用模糊之前将阴影向内收缩。这在材料设计中常用于创建更真实、集中的阴影。
如何复制CSS代码？
有两个复制选项：'复制CSS'提供包含选择器的完整CSS规则，'复制值'仅提供box-shadow值，可以粘贴到任何现有CSS规则中。
有哪些预设阴影样式？
该工具包含12种预设阴影样式：柔和、中等、大、超大、内阴影、轮廓、新拟态、新拟态Inset、彩色、发光、抬起和浮动。
可以用box shadow创建发光效果吗？
可以！使用'发光'预设，或通过将水平和垂直偏移设为0，使用大模糊半径（20px或更多），零扩展，选择高饱和度颜色来创建自定义效果。
阴影不透明度如何工作？
不透明度控制阴影的透明程度，从0（完全透明）到1（完全不透明）。较低的不透明度创建微妙的阴影，较高的不透明度创建更戏剧性的阴影。
所有浏览器都支持box shadow吗？
是的，CSS box-shadow属性在所有现代浏览器中都得到很好的支持，包括Chrome、Firefox、Safari、Edge和移动浏览器。不需要供应商前缀。
可以为box shadow添加动画吗？
是的，box shadow可以使用CSS过渡或动画来制作动画。在box-shadow上使用transition属性，例如：'transition: box-shadow 0.3s ease'。