? 线性渐变：从基础到进阶的视觉魔法
新手刚开始接触 CSS 渐变时，可能会被各种参数绕晕，但别怕，咱们慢慢来。线性渐变是最常用的类型，简单说就是颜色沿着一条直线过渡，这条直线的方向可以任意调整。比如，网页最常见的顶部导航栏渐变背景，大多就是线性渐变的功劳。
新手刚开始接触 CSS 渐变时，可能会被各种参数绕晕，但别怕，咱们慢慢来。线性渐变是最常用的类型，简单说就是颜色沿着一条直线过渡，这条直线的方向可以任意调整。比如，网页最常见的顶部导航栏渐变背景，大多就是线性渐变的功劳。
设置线性渐变的核心语法是
linear-gradient()，括号里首先要定义渐变方向。默认是从上到下，也就是to bottom，但如果想让渐变从左到右，就写成to right。更精确的话，还能直接写角度，比如45deg就是斜向右上的渐变方向。接下来就是颜色 stops，比如linear-gradient(to right, #ff0000, #00ff00)，这样就会从红色平滑过渡到绿色。这里有个小技巧：如果想让某个颜色区域更长，可以指定颜色的位置，比如
linear-gradient(to bottom, #000 20%, #fff 80%)，这样黑色会占据前 20% 的空间，白色从 20% 开始到 80% 结束，最后 80% 到 100% 还是白色？不，其实最后一个颜色会自动延伸到结束，所以这里白色会从 20% 一直到 100%，相当于中间 60% 是黑白过渡，最后 20% 是纯白色。刚开始可能会混淆，多试几次就明白了。? 径向渐变：打造立体层次感的关键
径向渐变和线性渐变最大的区别，就是它是以一个点为中心向外扩散的，特别适合做按钮的高光效果或者背景的光影层次。语法是
径向渐变和线性渐变最大的区别，就是它是以一个点为中心向外扩散的，特别适合做按钮的高光效果或者背景的光影层次。语法是
radial-gradient()，默认是从中心向外的圆形渐变，如果想变成椭圆形，就加上ellipse，比如radial-gradient(ellipse at center, #fff, #000)。圆心位置也可以自定义，比如
at top left就是左上角为圆心，at 30% 40%就是坐标 (30%, 40%) 的位置。渐变形状除了圆形、椭圆形，还能指定大小，比如closest-side表示渐变到最近的边，farthest-corner到最远的角落。举个例子，给一个按钮设置径向渐变，圆心在顶部中间，颜色从白色到浅蓝色，瞬间就有了阳光照射的立体感，用户点击欲望都能提升不少。这里要注意，径向渐变的颜色 stops 同样可以指定位置，和线性渐变类似，但因为是放射性扩散，位置参数会影响颜色分布的范围。比如
radial-gradient(circle, #ffd700 20%, #ff8c00 50%)，金色在 20% 半径内，然后过渡到橙色直到 50% 半径，之外的区域默认是最后一个颜色吗？不，和线性渐变一样，最后一个颜色会延伸到整个区域，所以 50% 半径外都是橙色，这样就能做出中间亮边缘暗的效果，很适合模拟光源。? 角度渐变：突破常规的创意玩法
角度渐变其实是线性渐变的一种特殊形式，只不过方向是通过角度精确控制的。比如
角度渐变其实是线性渐变的一种特殊形式，只不过方向是通过角度精确控制的。比如
0deg是向上，90deg是向右，180deg向下，270deg向左，当然也可以写30deg、120deg这样的角度，让渐变方向更灵活。比如做一个斜向的条纹背景，就可以用角度渐变配合重复渐变函数repeating-linear-gradient()。举个实际例子，做一个 45 度角的黑白条纹背景，代码是
background: repeating-linear-gradient(45deg, #000 0, #000 25px, #fff 25px, #fff 50px);，这样每 50px 就会重复一次黑白交替，形成条纹效果。角度渐变在背景设计中非常实用，能做出各种几何图案，比如菱形、斜线、网格等，只要调整角度和颜色 stops 的位置，就能创造出无限可能。? 在线生成器推荐：让代码编写更高效
说了这么多理论，现在该推荐几款好用的在线工具了，毕竟手动写代码容易出错，特别是复杂的渐变参数，有了生成器就能事半功倍。
说了这么多理论，现在该推荐几款好用的在线工具了，毕竟手动写代码容易出错，特别是复杂的渐变参数，有了生成器就能事半功倍。
1. CSS Gradient（https://cssgradient.io/）
这是我最常用的工具之一，界面简洁直观，支持线性、径向、角度渐变，还能实时预览效果。左边是参数调整区，右边是实时预览和代码生成。比如做线性渐变，直接拖动方向箭头就能调整角度，点击颜色块可以选择色值，还能添加多个颜色 stops。径向渐变可以调整圆心位置和形状，角度渐变更是直接输入角度值就行。生成的代码支持多种格式，包括 CSS、SVG，甚至还能导出图片，方便不同场景使用。
2. Canva Gradient Generator（https://www.canva.com/colors/gradient-generator/）
Canva 的渐变生成器更适合设计感强的用户，它提供了大量预设的渐变方案，比如清新的薄荷绿渐变、复古的橙红色渐变，点击就能直接使用。当然也可以自定义颜色，调整渐变方向和类型。最大的优势是能实时看到渐变在不同背景下的效果，比如放在图片上、文字上，方便判断是否协调。生成的代码同样简单易懂，新手也能轻松复制使用。
3. Color Hunt Gradient（https://colorhunt.co/gradient）
Color Hunt 主要是一个配色方案网站，但它的渐变功能也很强大。这里有很多用户分享的优质渐变案例，涵盖各种风格，比如扁平风、暗黑风、高饱和风等。点击任意一个渐变方案，就能看到详细的颜色值和 CSS 代码，还能在在线编辑器中调整参数，比如改变渐变方向、添加颜色节点。对于灵感枯竭的时候，这里简直是宝藏，直接参考现成的方案，效率大大提升。
? 实时预览教程：手把手教你操作
以 CSS Gradient 为例，详细说说怎么用在线生成器制作一个复杂的径向渐变。
以 CSS Gradient 为例，详细说说怎么用在线生成器制作一个复杂的径向渐变。
第一步：打开网站进入渐变编辑器
浏览器输入https://cssgradient.io/，点击首页的 “Gradient Generator” 进入编辑器。默认是线性渐变，我们点击左上角的 “Radial Gradient” 切换到径向渐变模式。
第二步：设置圆心位置和形状
在 “Shape” 选项里选择 “Circle” 或者 “Ellipse”，这里选 “Circle”。然后在 “Position” 里调整圆心位置，比如想让圆心在右上角，就把 X 轴拖到 100%，Y 轴拖到 0%，或者直接输入数值 “at 100% 0%”。
第三步：添加颜色节点
点击渐变轴下方的 “+” 号可以添加颜色 stops，默认有两个颜色，点击颜色块选择色值，比如第一个颜色选 #f0f8ff（AliceBlue），第二个选 #00008b（Navy）。如果想中间再加一个颜色，点击中间位置添加节点，选 #87ceeb（SkyBlue），这样就形成了三色渐变。
第四步：调整渐变范围
在 “Size” 选项里，选择 “Closest Corner”、“Farthest Corner”、“Closest Side”、“Farthest Side” 等，这里选 “Farthest Corner”，让渐变延伸到最远的角落，形成更大的扩散范围。
第五步：实时预览和生成代码
右边的预览区会实时显示效果，觉得满意后，下方的 CSS 代码就自动生成了，直接复制到你的样式表中就行。代码大概长这样：
css
background: radial-gradient(at % %, #f0f8ff, #87ceeb, #00008b);
是不是很简单？如果需要调整，随时在左边改参数，右边马上更新，再也不用凭想象写代码了。
? 实战应用：让你的设计更出彩
说了这么多，该看看实际应用场景了，毕竟学会了不用等于白学，对吧？
说了这么多，该看看实际应用场景了，毕竟学会了不用等于白学，对吧？
1. 按钮设计
给按钮添加线性渐变，从上到下颜色由浅到深，比如
linear-gradient(to bottom, #ffffff, #e0e0e0)，再加上边框和阴影，按钮立刻有了立体感。点击状态还可以换一个渐变，比如linear-gradient(to bottom, #e0e0e0, #ffffff)，模拟按下的效果，用户体验瞬间提升。2. 背景图替代
以前做背景图可能需要找设计师切图，现在用渐变就能搞定。比如做一个渐变的天空背景，线性渐变从蓝色到白色，加上径向渐变的太阳光晕，简单几行代码就能实现，还能节省带宽，提升加载速度。
3. 文字效果
给文字添加渐变效果，需要用到
background-clip: text和-webkit-background-clip: text，比如：css
h1 {
background: linear-gradient(deg, #ff0000, #00ff00);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
这样文字就会呈现出渐变颜色，比单纯的单色文字更吸引眼球，适合标题或重点文案。
4. 图像叠加效果
给图片添加一层半透明的渐变叠加，比如底部渐变变黑，让文字在图片上更清晰。用
linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.8))作为背景，覆盖在图片上，再调整透明度和位置，就能做出电影海报那种朦胧的文字效果。? 常见问题解答：避开那些坑
Q：为什么我的渐变在某些浏览器上显示不正常？
A：可能是没加浏览器前缀，比如
Q：为什么我的渐变在某些浏览器上显示不正常？
A：可能是没加浏览器前缀，比如
-webkit-linear-gradient、-moz-linear-gradient，虽然现代浏览器大多支持标准语法，但为了兼容性，最好加上前缀。Q：渐变颜色 stops 的位置怎么算？
A：可以用百分比，也可以用像素值，比如
A：可以用百分比，也可以用像素值，比如
20px，表示从距离起点 20px 的位置开始过渡。注意最后一个颜色不需要指定位置，会自动延伸到结束。Q：怎么让渐变重复显示，比如条纹背景？
A：用
A：用
repeating-linear-gradient或者repeating-radial-gradient，参数和普通渐变一样，只是会无限重复，适合做图案背景。Q：径向渐变的圆心位置怎么精确控制？
A：可以用
A：可以用
at关键字后面跟坐标，比如at center、at top right，也可以用百分比或像素值，比如at 50% 50%就是中心，at 100px 200px就是具体坐标位置。? 该文章由dudu123.com嘟嘟 ai 导航整理，嘟嘟 AI 导航汇集全网优质网址资源和最新优质 AI 工具
