🌈CSS渐变色生成器
在线创建线性渐变或径向渐变，实时预览效果，一键生成标准 CSS 代码，助力设计师与前端开发者快速构建炫彩背景。
🎯 类型
方向
180°
🎨 颜色停靠点
👁️ 实时预览
📋 CSS 代码
标准语法 · 含 -webkit- 前缀
/* 渐变代码将自动生成 */
💡 使用说明
- 选择 线性 或 径向 渐变类型，实时切换预览效果。
- 通过 方向按钮 或 角度滑块 控制线性渐变方向；径向渐变可调整 形状 与 位置。
- 每个停靠点可独立调整 颜色 和 位置（百分比），拖动滑块或点击色块修改。
- 点击 ＋ 添加 新增停靠点，点击 ✕ 删除停靠点（至少保留 2 个）。
- 点击 ↺ 重置 恢复默认渐变（红→蓝）。
- 点击 📋 复制代码 一键复制生成的 CSS 代码，可直接用于项目。
- 所有处理均在浏览器本地完成，不会上传任何数据，保护你的设计隐私。
💡
提示： 生成的 CSS 代码包含
background-image 属性，可直接应用于任何元素。含 -webkit- 前缀以兼容 Safari 等浏览器。
❓ 常见问题
CSS渐变有哪些类型？
CSS渐变主要有两种类型：linear-gradient（线性渐变）沿直线方向过渡颜色；radial-gradient（径向渐变）从中心点向外扩散过渡颜色。此外还可以使用repeating-linear-gradient和repeating-radial-gradient创建重复渐变效果。
生成的CSS代码兼容哪些浏览器？
生成的CSS代码包含标准语法和-webkit-、-moz-等浏览器前缀，兼容Chrome、Firefox、Safari、Edge等主流浏览器，支持IE10+。
如何创建多色渐变？
在渐变编辑器中添加多个颜色停靠点，每个停靠点设置不同的颜色和位置（0%-100%），系统会自动计算颜色之间的平滑过渡，创建丰富的多色渐变效果。
渐变背景适合哪些设计场景？
渐变背景广泛应用于网页Hero区域背景、按钮悬停效果、卡片背景、Banner设计、加载动画等场景。合理使用渐变可以增加视觉层次感和现代感。
如何调整渐变角度？
线性渐变支持0deg-360deg任意角度调整，常用角度包括：0deg（从下到上）、90deg（从左到右）、180deg（从上到下）、45deg（对角线）。可以直接输入角度值或拖动角度控制器调整。