余时行1. 为什么说 CSS 渐变是被严重低估的视觉武器
先说个我自己的观察。前阵子帮一个创业团队做产品官网，需求单上写着"要有高级感、要像大厂那样有质感、不要普通那种纯色背景加上去的廉价感"。我一看就知道，这又是对渐变有误解的典型需求——他们以为"渐变"就是把两种颜色糊在一起，实际上真正的渐变艺术，是用颜色去模拟光线、体积、材质和空间关系。
过去几年扁平化设计流行，很多人的第一反应是"渐变早过时了"。但你会发现，真正在业内被夸"有质感"的界面，几乎没有一个离开过渐变的支撑。玻璃拟态要渐变来提供高光和透感，Neumorphism 要内外阴影配合渐变，暗黑模式的高级感更要靠微妙的色阶渐变而不是死黑。渐变不是过时，它是从"装饰手法"升级成了一套完整的视觉语言系统。
这篇东西我想好好聊聊我这些年用 CSS 渐变踩过的路、总结出的实战经验。覆盖的对象包括但不限于：想做精美主页但只会给背景填纯色的前端新人，在纠结字体渐变色怎么才能不翻车的 UI 实现者，以及那些想用纯 CSS 做出"金光闪闪""涟漪扩散""波浪起伏"等特效的动效爱好者。我不讲那些浮在表面的 demo 展示，所有内容都是可以直接复制进项目里跑的，重点是告诉你每个参数背后为什么这么调。
关于热词里频繁出现的几件事——"css 字体渐变""css 如何做出来金光闪闪的效果""css涟漪光圈扩散""css波浪效果"——我都会在新技术的框架里逐一拆解。放心，不是贴一段代码完事，会把从原理到调试的完整过程讲清楚。
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 三种渐变的基本功：线性、径向、锥形，到底怎么选
很多人一提到 CSS 渐变，脑子里只有 linear-gradient 一个函数。说实话这也正常，早期资料全是这个。但等你在真实项目里泡久了就会发现，径向渐变和锥形渐变才是制造"视觉奇观"的隐藏杀器。选对渐变类型，比调一百次颜色都管用。
2.1 线性渐变：不只是"从上到下"这么简单
线性渐变的完整语法是 linear-gradient([方向或角度,] 颜色断点列表)。方向可以用关键词 to top、to bottom right，也可以直接写角度 45deg、120deg。这个角度是从下往上逆时针算的，初学者总搞混：0deg 是从下到上，90deg 是从左到右，和数学课上的坐标角度恰好相反。
我在做项目时习惯直接用角度而不是关键词。一个原因是关键词组合在斜向时会有理解偏差，比如 to bottom right 实际指的是渐变线朝那个方向延伸，而不是严格沿着对角线走；另一个原因是角度更容易在调整时做数学换算，我经常用 135deg 或 -45deg 来模拟从左上角打下来的自然光，这种光感在 UI 里最容易出效果。
颜色断点（color stop）是线性渐变的灵魂。linear-gradient(135deg, #ff9a9e 0%, #fad0c4 50%, #fbc2eb 100%) 这种写法大家都会，但我建议你多留意断点位置对节奏感的影响。比如想做高光扫过的金属质感，断点就不能平均排布，得把亮色集中在 45%—55% 这样窄区间里，其他地方留给深色，光线才有"聚焦"的感觉。
硬过渡（hard stop）也是个常用技巧。把两个断点放在同一个位置，比如 linear-gradient(90deg, #333 50%, #ddd 50%)，会得到一条非常锐利的分界线，不再有渐变的过渡。用这招配合多个背景图层，可以拼出条纹、方格、棋盘格甚至栅栏效果，不需要任何图片。很多"几何感"很强的背景其实就是多组硬过渡渐变叠出来的。
2.2 径向渐变：让光从画面里长出来
radial-gradient 的语法比线性复杂一层，但理解它的核心逻辑就一句话：它是从一个"假想光源"向外扩散的圆形或椭圆形渐变。默认形状是 ellipse，位置在容器中心。语法为 radial-gradient(形状和大小 at 位置, 颜色断点列表)。
这里最值得深挖的是"大小"参数。closest-side 表示渐变到离圆心最近的边就结束，farthest-corner 表示要覆盖到最远的角。我做一个按钮上的聚光效果时，喜欢用 radial-gradient(circle at 20% 30%, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 60%)，这个 at 20% 30% 是关键，光源位置偏左上，模拟的是现实中顶灯斜照的效果。换成 circle 是为了让光斑是正圆而不是被按钮形状拉伸的椭圆，这个细节直接影响质感。
还有一个常被忽略的用法：用径向渐变做"暗角"，即 vignette 效果。background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.6) 100%) 叠加在页面或图片上，视觉焦点自然被推向中心。不管是在摄影作品展示页还是阅读类应用里，这种暗角都能显著提升画面纵深。
2.3 锥形渐变：最被低估的一个
conic-gradient 至今还有很多人不熟悉，浏览器支持早就没问题了，但使用率远低于前两种。它的渐变是绕某个中心点旋转一周，默认从 0 度开始。基本语法是 conic-gradient(颜色断点列表)，比如 conic-gradient(red, yellow, lime, aqua, blue, magenta, red) 就能画出一个完整的色轮。
这东西在不需要图表库的场景下特别有用。做一个仪表盘式的进度环，conic-gradient(#4facfe 0%, #4facfe 70%, #eee 70%, #eee 100%) 用两段硬过渡就完成了，以前得靠 SVG 或者 Canvas。做一个环形菜单的选中态背景，直接叠加一层 conic-gradient 就能让某一段高亮，配合 CSS 变量做角度控制，交互逻辑也特别干净。
热词里有个"css 控制伪元素变量"，我在这里多说两句：把锥形渐变的角度和位置写成 CSS 自定义属性（--progress: 70%），在伪元素里用 conic-gradient(from var(--start-angle) at 50% 50%, ...)，只需要在 JavaScript 里改一个变量值，整个环形的填充角度就变了，连动画都用 transition 搞定。这个模式比之前用 class 切换高了好几档。
3. 让文字染上渐变色：字体渐变的完整方案与翻车点
"css 字体渐变"是这个话题下搜索量最高的需求，原因也好理解：纯色文字太单调，图片代替文字又影响 SEO 和可访问性，字体渐变是质感与工程两者兼得的最优解。实现方式集中在 background-clip: text 上，但它有一堆容易翻车的细节，官方文档不会告诉你。