CSS Box Shadow 生成器

实时预览创建多层 CSS 阴影

CSS Box Shadow 生成器完全在您的浏览器中运行。您创建的阴影图层和生成的 CSS 永远不会离开您的设备，也不会有任何内容上传到 ArrayKit。

打开 CSS Grid 生成器

关于 CSS Box Shadow 生成器

CSS Box Shadow 生成器通过让您叠加任意数量的阴影层来构建 box-shadow CSS 声明，每一层都有自己的偏移量、模糊度、扩散度、颜色和内嵌（inset）开关。当您调整数值时，实时预览框会立即更新，让您在复制代码之前就能准确看到阴影效果。可以将柔和的环境阴影叠在紧贴的接触阴影下方以获得逼真的层次感，也可以组合一个内嵌层和一个外凸层来实现按下按钮的效果。它专为前端开发者、设计师以及任何为卡片、按钮或弹窗设计样式、又不想在样式表中手动微调像素偏移量的人打造。一切都在浏览器本地运行——不会有任何 CSS 或设计细节被上传。

功能特性

如何使用 CSS Box Shadow 生成器

  1. 调整第一层阴影的 x、y、模糊度和扩散度
  2. 选择一种颜色，如果希望阴影出现在元素内部，请开启 Inset
  3. 点击“添加图层”以叠加另一层阴影，增加层次感
  4. 从代码面板复制生成的 box-shadow CSS

示例

输入

x0 y4 blur8 rgba(0,0,0,.2)

输出

box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.2);

一个柔和的投影阴影，渲染为可直接粘贴的 CSS 声明。

常见错误与故障排除

常见问题

CSS Box Shadow 生成器能生成什么？
它会根据您配置的一层或多层阴影，生成完整的 box-shadow CSS 声明，每一层都有自己的偏移量、模糊度、扩散度、颜色和内嵌设置，可直接粘贴到样式表中使用。
CSS Box Shadow 生成器可以创建多层叠加的阴影吗？
可以。点击“添加图层”即可叠加任意数量的阴影层——CSS 的 box-shadow 支持以逗号分隔的多个图层，工具会按正确顺序将它们合并。
什么是内嵌（inset）box-shadow？
内嵌 box-shadow 会渲染在元素方框的内部而非背后，常用于制作按下按钮的效果或细微的内边框。在任意图层上开启 Inset 即可切换。
CSS Box Shadow 生成器支持 rgba 和十六进制颜色吗？
支持。您可以在图层的颜色字段中输入任何有效的 CSS 颜色——hex、rgb() 或 rgba()，也可以使用颜色选择器输入十六进制值；rgba 可以让您单独控制阴影的透明度。
CSS Box Shadow 生成器会上传我的设计数值吗？
不会。所有阴影图层和生成的 CSS 都保留在您的浏览器中，您设计中的任何数据都不会上传到 ArrayKit 或任何服务器。
如何获得柔和、逼真的阴影而不是生硬的边缘？
相对于偏移量使用更大的模糊值，并考虑将一个紧凑的小阴影与一个更大更柔和的阴影叠加——这种双层方法可以模拟真实光照下阴影的效果。

相关工具

全部 ArrayKit 工具