预览
设置
X 偏移 5px
Y 偏移 5px
模糊 15px
扩展 0px
颜色
透明度 20%
内阴影
图层
CSS 代码 





        
        


        


        
        

            阴影 CSS 在您的浏览器中生成。不会发送到服务器。
            
        


    


    
    


        
CSS Box Shadow 生成器


        

            

                
工具功能

                
通过滑块调整 X/Y 偏移、模糊、扩展、颜色和透明度，实时查看阴影更新。切换内阴影在外部和内部阴影之间切换。添加多个阴影图层实现深度效果。应用预设快速开始，然后精细调整。点击一下复制 CSS 代码。

            

            

                
使用方法

                
    
                    
  1. 选择预设或从默认值开始。
    2. 
                    
  2. 调整滑块设置偏移、模糊、扩展和透明度。
    3. 
                    
  3. 点击颜色色板更改阴影颜色。
    4. 
                    
  4. 切换内阴影获得内部阴影效果。使用+ 添加图层叠加效果。
    5. 
                    
  5. 点击复制复制生成的 CSS。
    6. 
                

            

        

        

            
常见问题

            

                什么是 CSS box-shadow？
                
CSS `box-shadow` 属性为元素添加阴影效果。完整语法为 `box-shadow: [inset] x-offset y-offset blur spread color`。用逗号分隔可以叠加多层阴影。

            

            

                “内阴影”选项有什么作用？
                
开启内阴影后，阴影会出现在元素内部而不是外部，形成按下或凹陷的效果，常用于内发光或按钮按下状态。

            

            

                “扩展”值是什么？
                
扩展值在模糊之前放大或缩小阴影。正值让阴影大于元素，负值让阴影缩小。扩展为 0 时阴影与元素大小相同。

            

            

                如何创建多层阴影？
                
点击“+ 添加图层”新建一层阴影。每层都有独立的偏移、模糊、扩展、颜色和不透明度设置。各层在 CSS 输出中以逗号连接，这是标准 CSS，所有现代浏览器都支持。

            

            

                box-shadow 和 drop-shadow 有什么区别？
                
box-shadow 作用于元素的矩形边框，忽略透明区域。`filter: drop-shadow()` 会跟随元素的可见形状（包括透明区域），更适合 SVG 或透明背景 PNG 等非矩形元素。