CSS 盒子阴影生成器：实时预览与复制代码

CSS 盒子阴影生成器

这个生成器通过六个控制项构建一个 CSS box-shadow 值：水平偏移、垂直偏移、模糊半径、扩展半径、带有独立不透明度滑块的阴影颜色，以及 inset(内阴影)开关。另外两个颜色选择器用于设置预览框和背景颜色，让阴影在浅色和深色背景下都能看清楚，四个预设，soft、hard、glow 和 inset，可以一键加载现成的组合。每次修改都会立即更新预览下方的 box-shadow 代码行，可以直接复制。

box-shadow 值是如何生成的

CSS 按固定顺序书写阴影：水平偏移、垂直偏移、模糊半径、扩展半径，然后是颜色；如果要把阴影画在盒子边框内侧而不是背后，就在前面加上 inset 这个词。水平和垂直偏移会让阴影左右或上下移动，两者都可以取到 -50px 的负值，所以阴影可以落在盒子左侧或者盒子上方。模糊半径的范围是 0 到 100px，用来柔化阴影的边缘；扩展半径的范围是 -50 到 50px，可以在不改变盒子本身大小的情况下放大或缩小阴影。颜色选择器的十六进制值会被拆分成红、绿、蓝三个分量，0 到 1 之间的不透明度滑块则成为 rgba() 中的第四个值；滑块为 0 时阴影完全透明，为 1 时阴影和所选颜色完全一致。

计算示例

将水平偏移设为 -3px、垂直偏移设为 3px、模糊设为 10px、扩展设为 0px，阴影颜色设为 #dc2626，不透明度设为 0.5，得到的结果是 box-shadow: -3px 3px 10px 0px rgba(220, 38, 38, 0.5)。十六进制代码 #dc2626 拆分后为红色 220、绿色 38、蓝色 38，不透明度滑块的 0.5 无需任何换算，直接成为 rgba() 中的第四个值。在相同的六个数值下打开 inset，会在盒子边框内侧而不是背后画出完全相同的阴影，这种效果常用于按下的按钮或凹陷的输入框。

可直接复制的 CSS 代码

.card {
  box-shadow: -3px 3px 10px 0px rgba(220, 38, 38, 0.5);
}