同样一个按钮，有人做出来像大厂产品，有人做出来像十年前的网页。差距往往就在渐变、阴影、圆角这几个细节参数上。这篇不讲原理，只给能直接抄的规则和数值。
渐变：角度和颜色差一点，气质差很多
- 按钮渐变用 135°（左上到右下），比 90° 的「上下渐变」更现代。
- 两端颜色不要太远：同色系明度差 10%~15% 最自然，比如 #4F8CFF 到 #6FB1FF。
- 大面积背景避免高饱和渐变，容易显土；低饱和的灰蓝、灰紫系几乎不会翻车。
阴影：记住「小偏移 + 大模糊 + 低透明度」
| 元素 | 偏移 | 模糊 | 颜色建议 |
|---|---|---|---|
| 按钮 | 0 2px | 6~8px | 黑色 10%~15% 透明度 |
| 卡片 | 0 4px | 12~16px | 黑色 8%~12% |
| 弹层/悬浮 | 0 8px | 24~32px | 黑色 12%~18% |
阴影发脏通常有两个原因：偏移太大（x 和 y 都给到 5px 以上），或者用了纯黑不透明。透明度压到 15% 以下，阴影立刻干净。
圆角：和组件尺寸成正比
- 小按钮、输入框：6~10px
- 卡片、弹窗：12~16px
- 大图、封面图：16~24px
- 同一页面圆角尽量只用 2 档尺寸，视觉才统一
复制即用的调参流程
- 用取色器确定主色，拿到 HEX/RGB/HSL 三种格式
- 渐变生成器里调两个颜色和角度，实时预览后复制 CSS
- 阴影和圆角拖滑块微调，满意直接复制代码
推荐工具
取色器
选取或粘贴颜色，HEX、RGB、HSL 格式互转，自动生成同色系色板。
CSS 渐变生成
调两个颜色和角度实时预览 CSS 渐变代码，一键复制。
阴影生成器
拖动滑块调出盒阴影效果，实时预览并生成 CSS 代码。
圆角生成器
四角圆角独立调整实时预览，生成 CSS border-radius 代码。
免费在线使用，图片不上传服务器
常见问题
渐变和阴影能叠加使用吗？
可以，而且这正是「高级感」的来源：渐变打底 + 一层轻阴影 + 8~12px 圆角，是当下最常见的按钮配方。注意阴影只加一层，多层叠加容易脏。
为什么写好的代码在手机上不一样？
大阴影在小屏幕上会被裁切或显得笨重，响应式设计里移动端通常把模糊半径减半。调整参数时用预览工具切换不同宽度看效果最直观。