Free online CSS box-shadow generator. Visually adjust offset, blur radius, spread radius, color, and support inset shadows and multiple layers. Real-time preview, one-click copy CSS code. Perfect for frontend developers and designers. Client-side only.
Current: 1 shadow layer
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）绘制在元素边框内侧，用于创建凹陷效果，常用于输入框、按钮按下状态等交互设计。