主题
CSS 效果生成器
设计稿上有个渐变背景和一层柔和的投影，要在代码里还原。对着文档一个参数一个参数试，刷新十几次才调对。
打开「CSS 效果生成器」看到的初始界面。在浏览器本地完成、数据不离开浏览器，免费。
为什么值得用可视化调参
CSS 的几个效果属性有个共同问题：参数与视觉结果的关系不直观。
box-shadow: 0 8px 30px -12px rgba(160,105,70,0.28) —— 四个数值分别是水平偏移、垂直偏移、模糊半径、扩散半径，最后是颜色。光看数字很难想象出效果，而改错一个数就是完全不同的观感。
可视化调参把「猜—刷新—再猜」的循环，变成「拖—看—复制」。
渐变
线性渐变——沿一个方向过渡。角度 135° 是最常用的（左上到右下），因为它符合自然光从左上打来的直觉。
径向渐变——从中心向外扩散。适合做光晕、聚焦效果。
三色渐变——加中间色。两色渐变有时会在中间出现浑浊的过渡带（尤其是互补色之间），加一个中间色能控制过渡路径。
阴影：一个常被忽略的技巧
扩散半径设为负值，能让阴影收得比元素本身小，看起来是从元素下方透出来的，而不是围着一圈。这是「悬浮卡片」质感的关键。
另一个要点：阴影颜色不要用纯黑。中性黑投影落在暖色背景上会发灰发脏。背景偏暖就用带暖调的深色，偏冷就用冷调的——这个细节决定了做出来是「有质感」还是「像默认样式」。
滤镜
filter 可以做模糊、亮度、对比度、灰度等。两个实用场景：
毛玻璃效果——backdrop-filter: blur() 作用于元素背后的内容。注意它需要元素本身有一定透明度才看得出来。
图片统一风格——给一组图片加相同的 filter，能让来源不同的图看起来是一套的。
直接复制代码
调好后复制生成的 CSS。建议连同注释一起保留你调的关键值，下次要微调时不用重新试。
浏览器本地处理
不上传服务器。