01
看清阴影的层次
先调已有阴影的 Y 偏移和模糊，再添加一层短而淡的阴影。负扩散会缩小阴影轮廓，不等于把阴影往上移动。
HTML / CSS 工具
CSS 效果生成器让每个参数看得见
选择阴影、边框圆角、变换或滤镜；预览与代码只对应当前效果。
CSS 效果生成器
实时预览
彩色方块只是示例背景，不会写入 CSS 输出。
box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.18);
参数只留在当前浏览器标签页，不上传图片或 CSS。
效果参数
盒阴影 CSS 已更新。
设计稿给出一片柔和阴影，却没有说明偏移、模糊和扩散如何配合时，CSS 效果生成器可以让你逐层调整并立即看到差异。先用示例，再把生成的 box-shadow 放进自己的选择器。
CSS 效果生成器在一个页面保存四类参数；切换到 CSS 圆角生成器所需的四角设置，再回阴影模式也不会丢值。复制时只取当前声明，不会把其他模式偷偷拼进去。
为什么用 CSS 效果生成器
多层阴影，而不是手工拼逗号
单层 CSS 盒阴影生成器难以同时调出环境光和贴边阴影。这里可叠加最多四层，分别设置透明度、扩散半径及内阴影；列表顺序就是 box-shadow 声明里的顺序。
四种效果共用预览，不混合导出
切换边框、变换和滤镜时，CSS 效果生成器保留各模式的参数，但代码区只显示所选属性。想试 CSS 滤镜生成器的亮度与对比度，不会意外复制先前的阴影。
先理解数值，再复制代码
02
注意圆角联动和变换顺序
四角联动时只需一个半径；取消联动才能分别设置。变换按位移、旋转、缩放、倾斜输出，粘贴后改函数顺序会改变结果。
03
确认代码已经更新
自动模式在最后一次输入后约 350 毫秒刷新。关闭后用生成按钮或 Ctrl/Cmd + Enter；载入示例、重置或删层都先预览，应用后可撤销一次。
阴影、圆角、变换和滤镜的精确控制
四层盒阴影
CSS 盒阴影生成器的每层都有 X/Y 偏移、模糊、扩散、颜色、透明度和 inset。最终只输出一条逗号分隔的 box-shadow。
边框与独立圆角
CSS 圆角生成器的四角可以联动或独立，边框宽度、线型和颜色同时可调。宽度为零时输出 border: none，圆角仍保留。
固定顺序的变换
CSS 变换生成器可设置位移、旋转、缩放和倾斜；中性值不写入声明，全部中性则输出 transform: none。
组合滤镜参数
CSS 滤镜生成器可组合模糊、亮度、对比度、饱和度、灰度、复古色、色相、反色和不透明度；中性参数不输出。
输出范围与数值边界
- 只导出当前模式
- 页面内暂存各模式参数，但复制和 .css 下载只包含当前效果的声明，不含选择器、HTML、供应商前缀或可分享项目。
- 输入有明确范围
- 阴影最多四层；颜色使用六位十六进制值；负模糊或越界数字会阻止导出并指出字段。偏移和扩散允许负值。
- 不是背景滤镜
- 滤镜模式不输出 backdrop-filter 或 drop-shadow。box-shadow 沿盒轮廓绘制，drop-shadow 可沿不规则图像轮廓绘制，二者不能互换。
- 不反向解析 CSS
- 本工具不导入现有 CSS，也不生成动画、3D 翻牌、图片或整套 HTML。预览方块的彩色背景只是演示，不在代码中。
CSS 效果生成器常见问题
扩散半径和模糊半径有什么区别？
模糊半径决定边缘软硬，扩散半径改变阴影整体大小。这里模糊不能为负，扩散可为负。
内阴影是什么？
勾选 inset 后，该层 box-shadow 绘在元素盒内侧；它只影响这一层，不会自动改其他阴影。
可以叠加多个阴影吗？
可以。最多添加四层，CSS 中以逗号分隔。删除一层前会预览，应用后能撤销一次。
哪些浏览器支持 box-shadow？
现代浏览器支持标准 box-shadow。本工具生成无供应商前缀的声明，不针对旧版引擎另做回退。
border-radius 的八个 X/Y 值是什么意思？
八个值可描述椭圆角的水平和垂直半径；本工具只提供每角一个 px 半径，不生成椭圆角语法。
发现阴影或滤镜的结果不符合预期？