CSS 盒子阴影生成器
直观地构建 CSS 框阴影代码：用于偏移、模糊、扩散、不透明度颜色、插入模式和最多四层的滑块（带实时预览）。
处理中...
0%
结果
盒子阴影声明有六个移动部分 - X 和 Y 偏移、模糊、展开、颜色和可选的 inset 关键字 - 正确使用它们的唯一方法就是查看它们。该生成器将每个部分放在滑块上，并在拖动时将结果渲染在预览卡上，因此底部的 CSS 线始终正是您所看到的内容。
现实世界的阴影很少是单层的。图层列表允许您在一个声明中堆叠最多四个阴影：用于边缘定义的紧密暗线加上用于提升的宽软水洗，或定义同态的明暗对。选择一个图层进行编辑，删除不需要的图层，组合的框阴影值会实时更新。
阴影在深色界面上的读取方式非常不同，近乎黑色的页面上的黑色阴影会完全消失。预览背景切换可在浅色和深色之间切换背景，以便您可以在发货前检查这两个主题。预设页面涵盖了人们实际搜索的变体：柔和的立面阴影、插图井、两层同态配方和微妙的卡片阴影。
与该网站上的每个工具一样，该生成器是免费的，并且完全在您的浏览器中运行：无需上传，无需帐户，并且一旦页面加载，它就可以离线工作。