CSS 阴影生成器

通过实时滑块为偏移量、模糊、扩展、颜色、不透明度和内嵌设计多层CSS阴影——在真实元素上预览并即时复制可粘贴的CSS。

实时预览

CSS

box-shadow: —;

所有内容在您的浏览器中实时更新——无需上传，无需注册，完全免费。

阴影图层

内阴影

水平偏移

垂直偏移

模糊半径

扩展半径

阴影颜色

不透明度 20%

元素与画布

元素颜色

画布背景

边框圆角 16px

预设

关于 CSS 阴影生成器

CSS 阴影生成器让你以可视化方式设计盒子阴影，而不必在代码中猜测数值。拖动滑块调整水平偏移、垂直偏移、模糊半径、扩散半径、颜色和不透明度——还有一个内嵌阴影开关——并实时查看真实元素的更新效果。效果满意后，一键复制可直接粘贴的 CSS 代码。

现代界面的阴影很少只有一层。这个生成器支持堆叠多层阴影：添加、复制、隐藏或删除图层，可以只预览选中的图层，也可以预览所有图层叠加的效果。在柔和宽泛的阴影下再叠加一层紧贴的深色阴影，正是精致的卡片和按钮获得层次感的方法。

你还可以为预览元素本身设置样式——盒子颜色、圆角和画布背景——让阴影在贴近真实场景的背景下（包括深色表面）接受检验。可以从预设开始，点击"随机生成图层"获取灵感，也可以随时重置回到空白状态。所有操作都在浏览器中运行。

模糊会柔化阴影的边缘——模糊半径越大，阴影越弥散。扩散则会在模糊之前放大或缩小阴影的尺寸：正值会让阴影超出元素范围，负值会让阴影向内收缩，形成更紧凑的阴影。

逼真的层次感通常需要至少两层阴影：一层较小、颜色较深、紧贴元素以表现接触感，另一层较大、较柔和、更透明以表现环境光。生成器会将任意数量的图层堆叠成一个用逗号分隔的 box-shadow 值。

内嵌阴影绘制在元素内部而不是背后，会让表面看起来是凹陷或按压进去的效果。它常用于输入框、凹槽以及按钮被按下的状态。

可以。元素和画布控件让你更改盒子颜色、圆角和画布背景，因此你可以在复制 CSS 之前，检查阴影在深色表面上是否依然清晰可辨。

是的，完全免费。预览效果和生成的 CSS 都在浏览器中实时计算，无需注册，创建阴影的数量也没有限制。