渐变生成器
免费在线CSS渐变生成器，支持颜色选择器、角度调节、15种预设渐变。实时预览效果，一键复制代码，快速应用到网站设计中。
渐变生成器
起始颜色
结束颜色
角度
预览
CSS代码
background: linear-gradient(135deg, #667eea, #764ba2);预设渐变
什么是渐变生成器？
渐变生成器是一款在线CSS渐变创建工具，可以在两种颜色之间创建平滑的颜色过渡效果。它能够实时生成精美的渐变CSS代码，可应用于网站背景、按钮、卡片、横幅等各种UI元素。
选择起始颜色和结束颜色，调整角度，即可立即在预览区域查看效果。生成的CSS代码可一键复制，直接应用到您的项目中。通过15种热门预设和随机生成功能，激发您的设计灵感。
适用场景
- 网站背景设计 – 用精美的渐变效果替代单调的纯色背景，提升网站的视觉吸引力。
- 按钮样式设计 – 为CTA（行动召唤）按钮添加渐变效果，提高点击率，吸引用户注意力。
- 卡片UI设计 – 为个人资料卡、产品卡、信息卡的背景或边框添加渐变，营造高级感。
- 横幅/首屏区域 – 在落地页首屏区域和促销横幅上应用醒目的渐变背景。
- 文字特效 – 结合CSS的background-clip属性，为文字添加渐变效果。
- 社交媒体内容 – 作为微博、微信公众号等社交媒体图片的背景使用。
主要功能
- 实时预览 – 更改颜色或角度时，立即查看渐变效果。无需点击任何按钮，实时反映变化。
- 颜色选择器 + HEX输入 – 同时支持可视化颜色选择器和直接输入HEX代码。轻松应用设计稿中的精确颜色。
- 360度角度调节 – 通过滑块或直接输入，精确调整0°到360°的角度。预设按钮可快速选择常用角度。
- 颜色交换功能 – 一键交换起始颜色和结束颜色的位置，轻松反转渐变方向。
- 随机生成 – 点击一次按钮，即可发现意想不到的美丽渐变组合。需要设计灵感时非常有用。
- 15种预设 – 提供Sunset、Ocean、Mint、Pink等流行且经过验证的渐变组合。一键即可应用。
- 一键复制CSS – 将生成的CSS代码复制到剪贴板，直接粘贴到样式表中。
- 自动保存 – 上次使用的渐变设置会自动保存到浏览器，下次访问时可继续之前的工作。
使用方法
- 选择起始颜色 – 点击左侧的颜色选择器选择渐变的起始颜色，或直接输入HEX代码（例如：#FF5733）。
- 选择结束颜色 – 用同样的方式选择渐变的结束颜色。选择色调相近的颜色，两种颜色之间的过渡会更自然。
- 调整角度 – 移动滑块或输入数值来调整渐变方向。90°是从左到右，180°是从上到下。
- 查看预览 – 在右侧预览区域实时查看效果。调整颜色和角度，直到满意为止。
- 复制CSS代码 – 点击底部的”复制”按钮，将生成的CSS代码复制到剪贴板，然后粘贴到项目的CSS文件中。
CSS渐变详解
什么是线性渐变？
线性渐变（Linear Gradient）是CSS中最常用的渐变类型。它沿着一条直线在两种或多种颜色之间创建渐进的过渡效果。在网页设计中，它被广泛用于背景、按钮、遮罩等各种场景。
- 语法：
linear-gradient(angle, color1, color2) - 优点： 所有主流浏览器都支持，可以用纯CSS实现视觉效果，无需图片文件。
- 性能： 比图片文件小，渲染速度更快。
理解渐变角度
角度决定了渐变的方向。在CSS中，角度从0°开始指向上方（12点钟方向），顺时针递增。
- 0°（to top）： 从下往上渐变
- 45°： 从左下往右上渐变
- 90°（to right）： 从左往右渐变
- 135°： 从左上往右下渐变（最常用的角度）
- 180°（to bottom）： 从上往下渐变
- 270°（to left）： 从右往左渐变
颜色搭配技巧
以下是创建美丽渐变的颜色选择指南：
- 邻近色搭配： 色轮上相邻的颜色（如蓝→紫、黄→橙）能产生自然的过渡效果。
- 明度变化： 使用同一颜色的浅色和深色版本，可以营造简洁优雅的效果。
- 避免互补色： 色轮上正对面的颜色（互补色）可能在中间产生灰暗的颜色，最好避免使用。
- 流行搭配： 紫-粉、蓝-青、橙-粉系配色是当前网页设计的流行趋势。
浏览器支持
linear-gradient在所有现代浏览器中都得到完全支持：
- Chrome 26+（2013年起）
- Firefox 16+（2012年起）
- Safari 6.1+（2013年起）
- Edge 12+（2015年起）
- Opera 12.1+（2012年起）
- iOS Safari 7+（2013年起）
- Android浏览器 4.4+（2013年起）
不再需要-webkit-等供应商前缀，标准语法即可覆盖绝大多数用户。
实用技巧
- 渐变背景 + 叠加文字： 在深色渐变背景上放置浅色文字，可读性高且视觉效果出众。
- 半透明渐变： 为颜色添加透明度（使用rgba），可将渐变作为图片上的叠加层使用。
- 渐变边框： 结合
border-image属性，可以创建渐变边框。 - 动画效果： 使用CSS动画改变渐变的角度或颜色，创建动态背景效果。
常见问题
支持径向（圆形）渐变吗？
当前版本仅支持线性渐变。线性渐变是网页设计中最常用的类型，我们简洁直观的界面可以帮助您快速得到结果。
可以创建三种以上颜色的渐变吗？
本工具针对双色渐变进行了优化。双色渐变最为简洁实用，能满足大多数设计需求。如需多色渐变，可以在生成的CSS代码基础上手动添加颜色停止点。
如何使用生成的CSS代码？
点击”复制”按钮将CSS代码复制到剪贴板。然后将代码粘贴到CSS文件或HTML的style属性中即可。例如：.my-element { background: linear-gradient(...); }。
手机上可以使用吗？
可以，在移动端浏览器上也能完美运行。采用响应式设计，在智能手机和平板电脑上也可以使用颜色选择、角度调整、代码复制等全部功能。
可以保存创建的渐变吗？
上次使用的渐变设置（起始颜色、结束颜色、角度）会自动保存到浏览器的本地存储中。下次访问页面时，之前的设置会自动加载。无需账号或登录。
渐变在旧版浏览器中能正常显示吗？
CSS linear-gradient在2012年以后发布的所有浏览器中都得到支持。在IE 10+、Chrome 26+、Firefox 16+中无需供应商前缀即可正常工作。全球99%以上的用户都能正确查看渐变效果。