CSS 渐变生成器

linear-gradient(90deg, #3498db 0%, #9b59b6 100%)

工具简介：CSS 渐变生成器

CSS 渐变生成器是一个专业的在线工具，帮助您快速创建和自定义 CSS 渐变效果。支持线性渐变、径向渐变和圆锥渐变，提供实时预览和多种预设模板。

什么是CSS 渐变生成器？

CSS 渐变生成器用于可视化配置线性、径向与圆锥渐变，并自动生成可直接使用的 CSS 代码。你只需调整颜色、位置与方向，即可得到适合网页与设计稿的渐变背景。

如何使用

1. 选择渐变类型（线性 / 径向 / 圆锥）。
2. 添加颜色停止点并调整位置比例。
3. 设置角度、形状或中心点等参数。
4. 预览满意后复制生成的 CSS 代码。

常见应用场景

• 网页背景与 Hero 区域的主视觉渐变
• 按钮、卡片、标签的高质感填充
• 设计稿配色落地为可用的 CSS
• 品牌色扩展与主题色的层次搭配

❓ 常见问题 FAQ

Q1：预览和页面里不一致怎么办？
A：请确认元素尺寸与背景色设置一致，并检查是否被其他 CSS 覆盖。

Q2：旧浏览器不支持圆锥渐变？
A：可改用线性或径向渐变，必要时提供降级颜色或图片。

Q3：如何导出与复用？
A：复制生成的 CSS 代码，粘贴到样式表或设计系统变量中即可复用。

功能特点

多种渐变类型

• 线性渐变 (Linear Gradient)：沿直线方向的颜色过渡
• 径向渐变 (Radial Gradient)：从中心向外扩散的圆形或椭圆形渐变
• 圆锥渐变 (Conic Gradient)：围绕中心点旋转的颜色过渡

实时预览

• 所见即所得的渐变效果预览
• 实时更新 CSS 代码
• 支持大尺寸预览区域

颜色管理

• 添加多个颜色停止点
• 自定义每个颜色的位置（0-100%）
• 支持所有 CSS 颜色格式（HEX、RGB、HSL等）

渐变控制

• 线性渐变：调整角度（0-360度）
• 径向渐变：选择圆形或椭圆形
• 圆锥渐变：设置中心点位置

方向预设

• 提供八个常用方向的快捷按钮
• 一键更新角度输入，无需手动填写
• 激活状态明确当前的渐变方向

预设模板

提供多种精美的渐变预设：

• 日落、海洋、森林
• 火焰、天空、紫雨
• 糖果、午夜等

历史记录

• 自动保存创建的渐变
• 一键恢复历史渐变
• 清空历史记录功能

实用工具

• 复制 CSS 代码到剪贴板
• 随机生成渐变
• 反转渐变颜色顺序

使用方法

基本步骤

1. 选择渐变类型：在顶部选择线性、径向或圆锥渐变
2. 调整参数：根据渐变类型设置参数，或使用方向预设快捷选择
3. 添加颜色：点击"添加颜色"按钮添加颜色停止点
4. 调整颜色：选择颜色并调整位置
5. 应用预设（可选）：点击任意渐变预设即可加载现成效果
6. 复制代码：点击"复制代码"获取 CSS 代码

线性渐变设置

• 使用角度滑块或输入框调整渐变方向
• 角度范围：0-360度
• 0度表示从下到上，90度表示从左到右

径向渐变设置

• 选择形状：圆形或椭圆形
• 默认从中心向外扩散
• 可以通过修改 CSS 代码自定义中心位置

圆锥渐变设置

• 设置中心点的水平和垂直位置
• 位置可以使用百分比或像素值
• 颜色围绕中心点顺时针旋转

预设与历史

• 将鼠标悬停在预设卡片上即可预览，点击立即应用
• 每个预设展示的是根据颜色停止点生成的实时渐变效果
• 最近使用的渐变会自动保存，可在历史栏一键恢复
• 历史记录最多保留最近 10 条唯一渐变，并存储在浏览器本地

CSS 代码示例

线性渐变

background: linear-gradient(90deg, #ff7e5f 0%, #feb47b 100%);

径向渐变

background: radial-gradient(circle, #ff7e5f 0%, #feb47b 100%);

圆锥渐变

background: conic-gradient(from 0deg at 50% 50%, #ff7e5f 0%, #feb47b 100%);

浏览器兼容性

• 现代浏览器：完全支持所有渐变类型
• IE 10+：支持线性渐变和径向渐变
• 圆锥渐变：需要较新版本的现代浏览器

应用场景

CSS 渐变广泛应用于：

1. 网页背景：创建吸引人的背景效果
2. 按钮样式：为按钮添加渐变效果
3. 卡片设计：增强卡片的视觉层次
4. 加载动画：创建动态渐变效果
5. 品牌设计：使用品牌色彩创建渐变

使用技巧

1. 颜色选择：选择对比度适中的颜色，避免过于刺眼
2. 位置调整：合理分布颜色位置，创造平滑过渡
3. 预览测试：在不同背景下测试渐变效果
4. 性能优化：避免使用过多颜色停止点
5. 响应式设计：考虑在不同屏幕尺寸下的效果

常见问题

Q: 如何创建彩虹渐变？

A: 添加多个颜色停止点，使用红、橙、黄、绿、蓝、靛、紫等颜色，均匀分布位置。

Q: 渐变在某些浏览器中不显示怎么办？

A: 检查浏览器版本，添加适当的浏览器前缀（-webkit-、-moz-、-o-）。

Q: 如何创建重复渐变？

A: 使用 repeating-linear-gradient、repeating-radial-gradient 或 repeating-conic-gradient 函数。

Q: 如何优化渐变性能？

A: 减少颜色停止点数量，避免使用过于复杂的渐变，考虑使用图片替代复杂渐变。