CSS 阴影生成器 - 在线 box-shadow 实时预览

CSS 阴影生成器与实时预览

这款阴影生成器让你无需死记语法，就能可视化地设计任意 CSS box-shadow。拖动滑块调整偏移、模糊、扩散和不透明度，预览随手即时更新，生成的代码也随时可复制。

它专为想快速做出精致阴影的前端开发者和设计师打造。最多叠加 10 层独立的阴影图层来呈现真实的层次感，从 Elevated、Neumorph、Material 等 9 个内置预设起步，再细调每一层的颜色、不透明度和 inset，直到效果满意为止。

隐私至上：每个阴影都在你的浏览器中渲染，直接复制到剪贴板。任何数值、颜色或 CSS 都不会上传到服务器。

用 Offset X 和 Offset Y 让阴影水平和垂直移动，再用 Blur 控制边缘柔和度，用 Spread 放大或缩小阴影。可以拖动滑块，也可以在旁边的数字框里输入精确数值。

选择阴影颜色，并把不透明度从 0 滑到 100%。切换 Inset 开关，把外阴影变成内阴影，营造按下或凹陷的效果。

点击添加图层，最多叠加 10 层阴影，选中任意图层即可编辑，切换眼睛图标可以在对比时暂时隐藏某一层。或者点击 Soft、Material 等预设，直接载入现成的阴影组合再做调整。

调整背景和元素颜色，并在圆角、方形和圆形之间切换形状，在真实表面上测试效果。满意之后，点击复制，把完整的 box-shadow 规则放到剪贴板。

Offset X、Offset Y、Blur 和 Spread 各配一个滑块和数字输入框，拖动求快、输入求准。

选择任意阴影颜色，把不透明度设在 0 到 100% 之间，做出细腻自然的阴影，而非生硬的纯黑。

把任意图层在外阴影与内阴影之间切换，营造按下、凹陷或输入框的效果。

叠加多个设置各自独立的阴影，并随时添加、删除或隐藏每一层，构建真实的多级层次感。

从 Subtle、Elevated、Strong、Soft、Neon、Inset、Neumorph、Material 或 Float 起步，再按设计需要自定义。

改变背景色和元素颜色，在阴影实际出现的表面上测试效果。

把预览元素在圆角、方形和圆形之间切换，匹配你正在设计的真实 UI 组件。

你一改动任何数值，预览和生成的 CSS 就立即更新，无需反复猜测。

完整的 box-shadow 规则，包含每一层，一键复制到剪贴板。

box-shadow 用于在元素周围添加阴影。它的取值依次为水平偏移、垂直偏移、模糊半径、扩散半径和颜色，并可选择加上 inset 关键字。这款生成器会根据滑块为你生成完整无误的字符串。

Offset X 让阴影左右移动，Offset Y 让它上下移动，Blur 控制边缘的柔和程度（0 表示边缘锐利），Spread 取正值时放大阴影，取负值时缩小阴影。

Inset 开关把阴影从外阴影变成内阴影。内阴影位于元素内部，营造按下或凹陷的外观，常见于输入框和处于激活状态的按钮。

点击添加图层，在当前阴影之上叠加一层新阴影，总共最多 10 层。每一层都保留自己的偏移、模糊、扩散、颜色、不透明度和 inset，生成器会把它们合并成一条以逗号分隔的 box-shadow 规则。

使用较低的不透明度（约 10 到 25%），避免纯黑，并叠加两三层柔和的阴影，而不是一层很重的阴影。Soft 和 Elevated 预设正是这样构建的，是很好的起点。

可以。打开颜色选择器，选一个与你配色相称的色调；彩色阴影往往比单纯的黑色更有质感。Neon 预设展示了由扩散和鲜艳色调构成的彩色光晕。

兼容。box-shadow 受所有现代浏览器支持，包括 Chrome、Firefox、Safari 和 Edge，且无需任何厂商前缀，因此可以把输出直接粘贴到你的样式表中。