仅浏览器已上线开发者工具
盒子阴影生成器
可视化设计 CSS 阴影并复制代码。
隐私说明。 在你的浏览器中运行——你输入的内容保留在本页面,不会发送到服务器。
阴影层(1)
推荐的后续步骤
相关工具
常见问题
水平和垂直偏移让阴影相对元素左右、上下移动;模糊半径使其边缘变柔(0 为硬边,数值越大越柔和);扩展半径在应用模糊之前放大或缩小阴影的尺寸。负的扩展会把阴影收进来,适合制作轻微的悬浮效果。
再添加一个图层——CSS 允许用逗号分隔,在同一元素上叠加任意数量的阴影。列表中的第一层绘制在最上方。把一道紧凑的深色阴影叠在宽而柔和的阴影之上,是获得逼真景深效果的常见做法。
打开「内嵌」可将阴影绘制在元素边框盒内部而非外部,使表面看起来像被按下或凹陷。你可以在同一元素上混合内阴影和外阴影图层。
不会。一切都在你的浏览器中运行——预览和生成的 CSS 都在本地计算,你调整的任何内容都不会发送到服务器。复制代码并直接粘贴到你的样式表中即可。
最后更新:2026-06-23。