精选渐变色库
浏览我们精心挑选的渐变色彩方案，适用于各种设计项目。点击任意渐变即可复制CSS代码。
全部
流行
紫色系
蓝绿色系
暖色系
中性色
彩虹色
皇家紫
to right
background: linear-gradient(to right, #6C63FF, #9D4EDD);
紫粉霓虹
to bottom right
background: linear-gradient(to bottom right, #6366F1, #A855F7, #EC4899);
浪漫粉紫
to right
background: linear-gradient(to right, #C084FC, #DB2777);
深夜蓝紫
to bottom right
background: linear-gradient(to bottom right, #581C87, #4F46E5);
深邃紫红
to top
background: linear-gradient(to top, #7E22CE, #C026D3);
日落霓虹
to right
background: linear-gradient(to right, #F59E0B, #A855F7, #14B8A6);
梦幻紫粉
to bottom right
background: linear-gradient(to bottom right, #9333EA, #F472B6);
紫罗兰
to right
background: linear-gradient(to right, #8B5CF6, #EC4899);
加载更多
渐变生成器
使用我们的交互式渐变生成器，创建自定义渐变效果。调整颜色、方向和渐变类型，获取完美的CSS代码。
实时预览
调整参数查看效果
下载图片
复制CSS
渐变类型
线性
径向
圆锥
方向
颜色
添加颜色
角度
90°
设计灵感
探索渐变色在实际设计中的应用，获取创意灵感，提升你的项目视觉效果。
网站设计
渐变背景如何提升网站视觉吸引力
了解如何使用渐变色创建引人注目的网站背景、按钮和装饰元素，为你的网站增添现代感和深度。
查看教程
应用界面
渐变色彩在移动应用中的最佳实践
探索如何在移动应用设计中巧妙运用渐变色，创建视觉层次、强调重要元素并增强用户体验。
查看教程
品牌标识
如何用渐变色打造独特品牌形象
学习如何使用渐变色创建令人难忘的品牌标识、logo和视觉识别系统，让你的品牌脱颖而出。
查看教程
获取最新渐变趋势
订阅我们的通讯，获取每周精选渐变色方案、设计灵感和独家资源。
订阅
我们尊重你的隐私，绝不会分享你的邮箱地址。