🎨 CSS盒子阴影生成器

广告位 - 顶部 (728×90)

免费在线CSS盒子阴影(box-shadow)生成器。可视化调整偏移量、模糊半径、扩散半径和颜色,支持内阴影(inset)和多层阴影。实时预览效果,一键复制CSS代码。适合前端开发者和设计师快速生成阴影样式。纯前端,无需注册。

-50px4px50px
-50px4px50px
0px10px50px
-20px0px20px
0%30%100%

当前: 1层阴影

广告位 - 中部 (728×90)

常见问题

box-shadow属性中各个参数的含义是什么?

box-shadow属性的完整语法为:box-shadow: offset-x offset-y blur-radius spread-radius color inset。offset-x(水平偏移)正值向右,负值向左;offset-y(垂直偏移)正值向下,负值向上;blur-radius(模糊半径)值越大越模糊;spread-radius(扩散半径)正值放大阴影,负值缩小;color(颜色)设置阴影颜色;inset(可选)将阴影改为内阴影。

如何创建多层阴影效果?

可以通过逗号分隔多个阴影值来创建多层阴影效果,例如:box-shadow: 3px 3px 5px rgba(0,0,0,0.3), -3px -3px 5px rgba(0,0,0,0.1)。本生成器支持添加多层阴影,每层独立调整参数。

内阴影和外阴影有什么区别?

外阴影(默认)绘制在元素边框外侧,用于创建元素浮起的效果。内阴影(inset)绘制在元素边框内侧,用于创建凹陷效果,常用于输入框、按钮按下状态等交互设计。