🌈 渐变生成器

什么是渐变生成器？

渐变生成器是一款帮助设计师和前端开发者快速创建CSS渐变效果的在线工具。CSS渐变（gradient）是网页设计中最常用的视觉效果之一，能够让页面更具层次感和现代感。但手动编写渐变代码需要反复调整颜色、位置、角度等参数，效率很低。本工具提供可视化的渐变编辑界面，支持线性渐变、径向渐变、圆锥渐变三种类型，可以添加多个色标、调整渐变角度、实时预览效果，并一键复制CSS代码，大大提高设计和开发效率。

功能特点

• 三种渐变类型：支持线性渐变（linear-gradient）、径向渐变（radial-gradient）、圆锥渐变（conic-gradient）。
• 多色标支持：可添加任意多个颜色色标，每个色标可单独调整颜色和位置。
• 角度调整：线性渐变支持0°-360°角度调节，滑块拖动实时预览。
• 实时预览：所有修改立即反映在预览区域，所见即所得。
• CSS代码导出：一键复制标准CSS代码，直接粘贴到项目中使用。
• 精选预设：内置多款精选渐变色预设，点击即可应用，快速找到灵感。

CSS渐变类型详解

线性渐变（Linear Gradient）

线性渐变是最常用的渐变类型，颜色沿着一条直线方向过渡。语法：background: linear-gradient(角度/方向, 色标1, 色标2, ...)。方向可以用角度（如135deg）或关键字（如to right、to bottom right）表示。色标可以指定位置百分比（如#fff 50%），不指定则均匀分布。线性渐变广泛应用于按钮、背景、卡片、hero区域等，是UI设计中提升质感的利器。

径向渐变（Radial Gradient）

径向渐变从一个中心点向外辐射，颜色从中心向边缘过渡。语法：radial-gradient(形状 大小 at 位置, 色标1, 色标2, ...)。形状可以是circle（圆形）或ellipse（椭圆）。径向渐变常用于创建聚光灯效果、球体/圆形按钮、光晕效果等，给元素增加立体感和深度。在拟物化设计和玻璃态设计中经常使用。

圆锥渐变（Conic Gradient）

圆锥渐变（又称角向渐变）的颜色围绕中心点旋转过渡，像圆锥的横截面一样。语法：conic-gradient(起始角度 at 位置, 色标1, 色标2, ...)。圆锥渐变适合创建饼图、色轮、仪表盘、进度环等效果。注意：圆锥渐变是较新的CSS特性，现代浏览器基本都支持，但老版本浏览器可能不兼容。

渐变的CSS语法

/* 线性渐变基础语法 */
background: linear-gradient(direction, color1 pos1, color2 pos2, ...);

/* 示例：从左上到右下的紫蓝渐变 */
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

/* 径向渐变 */
background: radial-gradient(circle at center, #ff9a9e, #fad0c4);

/* 圆锥渐变 */
background: conic-gradient(from 0deg, #f093fb, #f5576c, #f093fb);

/* 多色渐变 */
background: linear-gradient(to right, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #8b00ff);

/* 硬边渐变（两个色标同位置） */
background: linear-gradient(to right, #4F46E5 50%, #10B981 50%);

使用场景

场景一：按钮和CTA设计

渐变色按钮比纯色按钮更引人注目，点击率通常更高。用本工具选择两种搭配的颜色，调整到合适的角度（通常偏斜一点的角度更好看），生成渐变代码应用到按钮上。常见做法：主色加一个亮一点或深一点的同色系颜色，做出有光泽感的立体按钮；或者用互补色搭配，做出醒目的强调按钮。

场景二：页面背景和Hero区域

渐变背景比纯色背景更有视觉吸引力，能让页面摆脱单调。很多SaaS网站和产品首页都会使用渐变色作为hero区域的背景。可以用品牌主色衍生出的渐变，保持品牌一致性。技巧：在渐变上叠加一层噪点纹理或网格图案，可以让渐变更有质感、不廉价。

场景三：卡片和装饰元素

渐变可以用在卡片顶部的装饰条、头像边框、标签背景、进度条等地方，增加设计细节。同一个项目中使用同色系的不同渐变，可以保持整体风格统一又有变化。注意不要过度使用渐变，太多渐变色会让页面显得杂乱。建议2-3处关键位置使用即可，起到画龙点睛的作用。

渐变配色技巧

• 同色系渐变：同一色相不同明度的渐变，最安全、最有高级感。
• 类似色渐变：色轮上相邻颜色的渐变，过渡自然和谐。
• 互补色渐变：对比强烈，视觉冲击力大，但要注意中间过渡色是否好看。
• 三色渐变：用三种颜色做渐变，更丰富但也更容易出错，注意中间色的选择。
• 透明度渐变：从实色到透明的渐变，常用于图片上的文字遮罩。
• 多重渐变叠加：多层渐变叠加可以创造更复杂的效果，但需要一定的设计功底。