CSS Box-Shadow Builder

One input per line. Output is numbered to match the input order.
Pinned tools are listed in your favourites on the home page.Copies a link to this tool that carries your current input, so it opens ready to run.Gives you an iframe snippet for putting this tool on your own site.
Ctrl+Enter Run  · Ctrl+Shift+C Copy  · Esc Clear

Understand CSS Box-Shadow Builder

通过偏移、模糊、扩散、颜色和内阴影等控件构建 CSS box-shadow 声明，并支持叠加多层。

How it works

语法是 `box-shadow: [inset] 水平偏移 垂直偏移 模糊 扩散 颜色`。偏移量会移动元素盒子的一份副本；扩散在模糊之前放大或缩小这份副本；随后模糊以边缘为中心、在大约模糊距离的范围内柔化边界，因此约有一半落在形状之内、一半落在之外。多个阴影以逗号分隔，并按从前到后绘制，因此列表中的第一个位于最上层——这也是为什么真实的纵深感来自把一层紧致的小阴影叠在一层大而弥散的阴影之上，而不是来自单独一个大模糊。

When to use it

  • 为设计系统构建一套高度层级，其中每一级都是一对固定搭配的叠加阴影
  • 为按下状态的按钮、凹槽或输入框制作内阴影
  • 用零模糊的扩散阴影画出细线边框，它不会像真正的边框那样影响布局
  • 在不手工解读偏移和模糊数值的情况下，复现设计文件中的阴影

Watch out for

  • box-shadow 跟随的是边框盒及其 border-radius，而不是其中的图形内容。对于透明 PNG 或 SVG 图标，你要的是 `filter: drop-shadow()`，它跟随的是 alpha 轮廓。
  • 内阴影绘制在内边距盒之内，并被边框裁切。在没有内边距的元素上，内阴影可能几乎完全被它自己的内容遮住。
  • 大模糊半径的绘制开销很高，而且每次重绘都要重新计算。在滚动列表里放十几个 60px 的阴影，在低端设备上是可测量的帧率代价。
  • 被裁切元素上的阴影会消失。祖先元素上的 clip-path 和 `overflow: hidden` 都会把阴影切掉，因为阴影绘制在元素盒子之外。

Frequently Asked Questions

如何在 CSS 中应用盒阴影？

给任意元素加上 box-shadow: 水平偏移 垂直偏移 模糊半径 颜色。例如：box-shadow: 0 4px 12px rgba(0,0,0,0.15) 会产生柔和的投影。用本构建器拖动滑块并复制精确的 CSS 属性——无需死记语法。

如何在 CSS 中制作盒阴影？

语法为：box-shadow: 水平偏移 垂直偏移 模糊半径 扩散半径 颜色。正的垂直偏移把阴影投在元素下方；负值则投在上方。模糊半径控制柔和度（0 表示硬边）。在各偏移量之前加上 "inset" 关键字可得到内阴影。

可以叠加多层盒阴影吗？

可以——用逗号分隔多个 box-shadow 值：box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 8px 24px rgba(0,0,0,0.08)。阴影按从前到后的顺序渲染（第一个在最上层）。把一层锐利的小阴影与一层大而弥散的阴影叠加，能营造真实的材质纵深感。

How to Use CSS Box-Shadow Builder

  1. Paste or type your input in the input area above.
  2. The tool processes your input automatically or click Run.
  3. Copy or download the result using the action buttons.
  4. Use Ctrl+Enter to run quickly from the keyboard.