Box Shadow 生成器
免费在线 CSS 阴影生成工具,支持实时预览
CSS box-shadow 语法
box-shadow CSS 属性为元素添加阴影效果。语法:box-shadow: [inset] offset-x offset-y blur spread color。多个阴影可以用逗号分隔。使用可视化编辑器调整数值并实时查看结果。
如何使用盒阴影生成器
调整偏移 X、偏移 Y、模糊半径和扩展半径的滑块。选择阴影颜色并切换内阴影选项。生成的 CSS 代码实时更新,可以复制到剪贴板。
▶模糊和扩展有什么区别?
模糊控制阴影边缘的柔和程度(0 = 锐利边缘,值越高越柔和)。扩展在所有方向上扩大或缩小阴影。正扩展使阴影比元素更大。
▶可以添加多个阴影吗?
可以,CSS 支持用逗号分隔的多个阴影:box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.1);。组合微妙阴影可以获得更真实的深度效果。
▶内阴影是什么效果?
内阴影出现在元素内部而非外部。它创建元素向内凹陷的效果,如文本输入框或按钮的凹陷感。