热门实用款，分类清晰 + 代码解析 + 效果说明，直接复制即可用于网页背景、按钮、卡片，兼容所有现代浏览器！

CSS 20 种渐变代码合集

一、线性渐变（14 种，最常用，直线过渡）

1. 粉紫玫红渐变

css

background: linear-gradient(90deg, #f093fb 0%, #f5576c 100%);

复制

解析：90° 水平从左到右，淡粉紫过渡玫红

效果：温柔甜美，适合美妆、少女风 UI

2. 清新冰蓝渐变

css

background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%);

复制

解析：90° 水平渐变，天蓝色→青蓝色

效果：清爽科技感，适合数据面板、网页背景

3. 轻奢紫蓝渐变

css

background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);

复制

解析：90° 水平渐变，浅紫蓝→深紫罗兰

效果：高级商务风，适合导航栏、卡片背景

4. 自然青绿渐变

css

background: linear-gradient(90deg, #11998e 0%, #38ef7d 100%);

复制

解析：90° 水平渐变，深青绿→薄荷绿

效果：护眼治愈，适合生态、健康类界面

5. 元气粉黄渐变

css

background: linear-gradient(90deg, #fa709a 0%, #fee140 100%);

复制

解析：90° 水平渐变，蜜桃粉→暖鹅黄

效果：活泼可爱，适合甜品、儿童、电商 UI

6. 马卡龙浅色系渐变

css

background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);

复制

解析：135° 斜向（左上→右下），薄荷青→樱花粉

效果：INS 风清新，适合简约卡片、装饰元素

7. 深海三色垂直渐变

css

background: linear-gradient(180deg, #0c3483 0%, #a2b6df 50%, #6b8cce 100%);

复制

解析：180° 垂直从上到下，三色分层过渡

效果：层次感强，适合全屏背景、APP 主页

8. 潮流撞色渐变

css

background: linear-gradient(45deg, #fc466b 0%, #3f5efb 100%);

复制

解析：45° 斜向（左下→右上），玫红→紫罗兰蓝

效果：炫酷吸睛，适合按钮、海报、潮流网页

9. 暖橙柔粉渐变

css

background: linear-gradient(90deg, #ff9a9e 0%, #fecfef 50%, #fecfef 100%);

复制

解析：90° 水平三色渐变，暖橙→柔粉

效果：温柔柔和，适合个人主页、温馨界面

10. 雾霾蓝紫渐变

css

background: linear-gradient(90deg, #5f72bd 0%, #9b23ea 100%);

复制

解析：90° 水平渐变，雾霾蓝→浅紫

效果：低调高级，适合暗黑模式、轻奢设计

11. 森系墨绿渐变

css

background: linear-gradient(180deg, #00b09b 0%, #96c93d 100%);

复制

解析：180° 垂直渐变，墨绿→浅草绿

效果：自然清新，适合户外、绿植类网页

12. 复古酒红渐变

css

background: linear-gradient(45deg, #b721ff 0%, #21d4fd 100%);

复制

解析：45° 斜向渐变，酒红→浅蓝

效果：复古撞色，适合艺术、创意类 UI

13. 极简灰调渐变

css

background: linear-gradient(90deg, #e0eafc 0%, #cfdef3 100%);

复制

解析：90° 水平渐变，浅灰→浅蓝灰

效果：极简干净，适合办公、工具类网页

14. 七色彩虹渐变

css

background: linear-gradient(90deg, #ff0000 0%, #ff7f00 17%, #ffff00 33%, #00ff00 50%, #0000ff 67%, #4b0082 83%, #9400d3 100%);

复制

解析：90° 水平七色均匀渐变，标准彩虹色

效果：色彩绚丽，适合节日、趣味主题界面

二、径向渐变（4 种，中心向外扩散）

15. 晚霞星空径向渐变

css

background: radial-gradient(ellipse at center, #1a2a6c 0%, #b21f1f 50%, #fdbb2d 100%);

复制

解析：中心椭圆扩散，藏青→酒红→金黄

效果：氛围感拉满，适合全屏艺术背景

16. 海洋光晕径向渐变

css

background: radial-gradient(ellipse at center, #ffffff 0%, #6dd5ed 50%, #2193b0 100%);

复制

解析：中心椭圆扩散，纯白→浅蓝→深海蓝

效果：通透清新，适合光晕装饰、卡片背景

17. 柔光白色渐变

css

background: radial-gradient(circle at center, #fff 0%, #d7e1ec 100%);

复制

解析：正圆形中心扩散，纯白→浅灰蓝

效果：柔和干净，适合弹窗、卡片底色

18. 黑金高级渐变

css

background: radial-gradient(ellipse at center, #242424 0%, #000000 100%);

复制

解析：中心椭圆扩散，深灰→纯黑

效果：奢华低调，适合高端品牌、暗黑界面

三、锥形渐变（2 种，环形旋转，饼图 / 色轮）

19. 彩虹色轮锥形渐变

css

background: conic-gradient(from 0deg at center, #ff0000 0%, #ff7f00 17%, #ffff00 33%, #00ff00 50%, #0000ff 67%, #4b0082 83%, #9400d3 100%);
border-radius: 50%;

复制

解析：中心环形旋转，七色彩虹色轮

效果：创意十足，适合色轮组件、装饰图标

20. 三色简约饼图渐变

css

background: conic-gradient(#ff6b6b 0 120deg, #4ecdc4 120deg 240deg, #ffeaa7 240deg 360deg);
border-radius: 50%;

复制

解析：分段锥形渐变，纯色拼接饼图

效果：简洁实用，适合数据可视化、饼图组件

通用使用方法

给 HTML 元素添加类名即可生效：

html

预览

<div class="gradient"></div>

复制

css

.gradient {
  width: 300px;
  height: 200px;
  /* 粘贴上方任意渐变代码 */
  border-radius: 12px; /* 可选：圆角美化 */
}

复制

总结

线性渐变：覆盖日常 90% 场景，适合背景、按钮、导航栏；
径向渐变：适合光晕、氛围感背景、高端 UI；
锥形渐变：适合色轮、饼图、创意环形装饰；

所有代码无兼容问题，直接复制使用，无需修改！

本网站部分文件及内容来自互联网，版权归原作者所有。转载需授权，侵权必究。部分内容受《网络出版服务管理规定》保护，未经许可禁止商业使用。

THE END

知识分享
# CSS 渐变 # 线性渐变 # 径向渐变 # 锥形渐变 # 代码解析

20 种精选高颜值 CSS 渐变代码