# CSS-Gradient-Generator

**Repository Path**: popingzi/CSS-Gradient-Generator

## Basic Information

- **Project Name**: CSS-Gradient-Generator
- **Description**: 零依赖、纯静态的CSS渐变可视化生成工具，帮助前端开发者和设计师快速创建精美的渐变背景效果。无需安装任何软件，打开浏览器即可使用，实时预览效果，一键复制可用的CSS代码；工具支持多图层叠加、多种渐变类型、色标拖拽调整、透明度控制、背景平铺配置等专业功能，内置30+精选渐变预设(后续可自行增加预设)，让你轻松创造出专业级的渐变效果。
- **Primary Language**: JavaScript
- **License**: AGPL-3.0
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-07-23
- **Last Updated**: 2026-07-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## ✨ 项目介绍

CSS Gradient Generator 是一款**零依赖、纯静态**的CSS渐变可视化生成工具，帮助前端开发者和设计师快速创建精美的渐变背景效果。无需安装任何软件，打开浏览器即可使用，实时预览效果，一键复制可用的CSS代码。

工具支持多图层叠加、多种渐变类型、色标拖拽调整、透明度控制、背景平铺配置等专业功能，内置30+精选渐变预设，让你轻松创造出专业级的渐变效果。

## 🚀 在线演示

👉 Chinese：**[点击立即体验](https://2925112454.github.io/CSS-Gradient-Generator/zh/)**
👉 English：**[点击立即体验](https://2925112454.github.io/CSS-Gradient-Generator/en/)**

> 💡 提示：工具完全在浏览器本地运行，无需上传任何数据，保护你的隐私安全

## 🎯 功能特性

### 核心功能
- ✅ **六种渐变类型**：线性渐变、重复线性渐变、径向渐变、重复径向渐变、锥形渐变、重复锥形渐变
- ✅ **多图层系统**：支持无限图层叠加，拖拽排序，右键复制/粘贴/删除
- ✅ **色标管理**：可视化拖拽调整色标位置，支持颜色选择和透明度调节
- ✅ **实时预览**：所有调整即时生效，所见即所得
- ✅ **一键复制**：点击预览区或按钮即可复制完整CSS代码
- ✅ **精选预设**：内置30+精美渐变预设，一键应用
- ✅ **平铺配置**：支持自定义background-size和background-position，轻松制作棋盘格、条纹等图案
- ✅ **文字渐变**：支持自由切换至盒子渐变模式、文字渐变模式(background-clip: text;)
- ✅ **预设拓展**：CSS渐变预设专属页面，可无限自定预设库，一键复制css代码，无缝切换至编辑页面进行二次编辑
- ✅ **预览全屏**：电脑端鼠标右键预览区进行全屏/关闭全屏预览，移动端双击预览区进行全屏/关闭全屏预览(预览模式为文字时无效)

### 体验优化
- 🌓 **深浅主题**：支持深色/浅色模式切换，自动记忆用户偏好
- 📱 **响应式设计**：完美适配桌面端和移动端，支持触摸操作
- 🖱️ **右键菜单**：图层和色标支持右键快捷操作
- 💾 **本地存储**：主题设置自动保存到本地
- ⚡ **零依赖**：纯原生HTML/CSS/JavaScript编写，无任何框架依赖
- 🌍 **双语支持**：提供中文和英文两个版本

## 📖 使用说明

### 基础操作流程
1. **选择渐变类型**：在右侧控制面板选择你需要的渐变类型（线性/径向/锥形/重复渐变）
2. **调整渐变参数**：
   - 线性渐变：调整渐变角度（0°-360°）
   - 径向渐变：设置形状（圆形/椭圆）、尺寸、中心点位置
   - 锥形渐变：调整起始角度（0°-360°）、中心点位置
3. **管理色标**：
   - 点击「添加色标」增加颜色节点
   - 在轨道上拖拽色标滑块调整位置
   - 点击颜色选择器修改颜色
   - 拖动透明度滑块调整颜色透明度
4. **多图层叠加**：点击「新增图层」添加更多渐变图层，通过拖拽调整图层顺序
5. **应用预设**：点击左侧预设区域的任意渐变，一键应用精美效果
6. **配置平铺**：如需制作重复图案，填写背景平铺大小和位置
7. **复制代码**：点击「复制CSS代码」按钮或直接点击预览区域，即可复制生成的CSS代码

### 右键快捷操作
- **图层右键**：复制图层、粘贴图层、删除图层
- **图层拖拽**：调整图层顺序
- **色标右键**：复制色标、粘贴色标、删除色标
- **移动端**：长按图层进行拖拽调整图层顺序，PC端特有的右键操作方式全部换成双击操作即可

### 快捷键
- PC端：
   - 单击预览区快速复制CSS代码
   - 双击预览区进行全屏/关闭全屏预览(预览模式为文字时无效)
- 移动端：
   - 拖动预览区进行位置移动
   - 双击预览区进行全屏/关闭全屏预览(预览模式为文字时无效)

## 🔧 功能详解

### 渐变类型说明

| 类型 | 说明 | 适用场景 |
|------|------|----------|
| 线性渐变 `linear-gradient` | 颜色沿直线方向过渡 | 大多数常规背景、按钮渐变 |
| 重复线性 `repeating-linear-gradient` | 线性渐变重复平铺 | 条纹图案、进度条、纹理背景 |
| 径向渐变 `radial-gradient` | 颜色从中心点向外辐射扩散 | 聚光灯效果、圆形光晕、球体 |
| 重复径向 `repeating-radial-gradient` | 径向渐变重复平铺 | 同心圆图案、波纹效果、靶心 |
| 锥形渐变 `conic-gradient` | 颜色沿顺时针方向旋转 | 扇形、圆锥、球体 |
| 重复锥形 `repeating-conic-gradient` | 锥形渐变重复平铺 | 同心圆图案、波纹效果、靶心 |

### 径向渐变参数
- **形状**：`circle`（正圆形）/ `ellipse`（椭圆形）
- **尺寸**：
  - `closest-side`：渐变中心距离最近的边为半径
  - `farthest-side`：渐变中心距离最远的边为半径
  - `closest-corner`：渐变中心距离最近的角为半径
  - `farthest-corner`：默认值，渐变中心距离最远的角为半径
- **中心点**：通过X%和Y%调整渐变中心位置

### 锥形渐变参数
- **起始角度**：0°-360°
- **中心点**：通过X%和Y%调整渐变中心位置

### 生成的CSS代码示例
```css
/* 简单线性渐变 */
background: linear-gradient(45deg, rgba(79,172,254,1) 0%, rgba(0,242,254,1) 100%);

/* 多图层叠加渐变 */
background: radial-gradient(circle farthest-side at 100% 0%, rgba(15,215,255,0.7) 0%, rgba(0,0,0,0) 22%), 
            linear-gradient(227deg, rgba(97,77,255,1) 0%, rgba(76,0,255,1) 50%, rgba(212,0,255,1) 100%);

/* 带平铺配置的棋盘格图案 */
background: linear-gradient(45deg, rgba(34,34,34,1) 25%, rgba(170,170,170,0) 25%, rgba(170,170,170,0) 75%, rgba(34,34,34,1) 75%), 
            linear-gradient(45deg, rgba(34,34,34,1) 25%, rgba(171,171,171,1) 25%, rgba(171,171,171,1) 75%, rgba(34,34,34,1) 75%);
background-size: 20px 20px;
background-position: 0 0, 10px 10px;
```

### 预设扩展页面
- **功能**：
  - 一键复制预设CSS代码
  - 一键点击编辑按钮，无缝切换至编辑页面进行二次编辑
  - 支持在预设中设定分类及预设名称
  - 可以按设定的分类进行筛选

## 📁 项目结构

```
../
├── zh/                          # 中文版
│   ├── index.html               # 主页面(渐变编辑页面)
│   ├── color.html               # 预设扩展页面
│   ├── css/
│   │   ├── style.css            # 主样式文件
│   │   ├── remixicon.css        # 图标库样式
│   │   └── remixicon.woff2      # 图标字体
│   └── js/
│       ├── color.js             # 主页面的渐变预设数据
│       ├── colors.js            # 核心逻辑：预设扩展页面专属复制、无缝切换至编辑页面进行二次编辑
│       ├── loadGradientData.js  # 预设扩展页面的渐变预设数据
│       ├── cssCode.js           # 核心逻辑：渐变生成、交互处理
│       ├── light.js             # 主题切换（深色或浅色模式）
│       └── message.js           # 消息提示组件
├── en/                          # 英文版（结构同中文版）
│   ├── index.html
│   ├── css/
│   └── js/
├── index.html                   # 临时中英文跳转页(Github Pages所用，可删除)
├── README.zh-CN.md              # 项目说明文档(中文)
└── README.md                    # 项目说明文档(英文)
```

## 🛠️ 技术栈

- **HTML5**：语义化标签
- **CSS3**：CSS变量、Flex布局、Grid布局、过渡动画
- **原生JavaScript (ES6+)**：无任何框架依赖
- **Remix Icon**：开源图标库（已打包到本地）

### 代码特点
- 纯原生实现，无需构建工具，修改源码直接刷新即可生效
- 模块化设计，每个JS文件职责单一
- 支持括号智能解析，正确处理复杂多图层渐变导入
- 兼容鼠标和触摸事件，移动端友好
- 本地存储记忆主题设置，支持隐私模式降级

## 🌐 浏览器兼容性

| 浏览器 | 版本支持 |
|--------|----------|
| Chrome | ✅ 60+ |
| Firefox | ✅ 55+ |
| Safari | ✅ 12+ |
| Edge | ✅ 79+ |
| 移动端浏览器 | ✅ iOS 12+, Android 8+ |

> 💡 说明：工具使用了现代CSS和JS特性，不支持IE浏览器

### 可以贡献的方向
- 🎨 添加更多精美的渐变预设
- 🌍 其他语言的翻译
- 🐛 修复Bug和兼容性问题
- ✨ 增加新功能（如渐变导出为图片、CSS代码压缩、更多颜色格式支持等）
- 📝 改进文档

## 📋 更新日志

### v2.0.0 (2026-7-23)
- ✅ 为了能增加更多预设，特意增加预设专用页面color.html，无缝切换至编辑页面进行二次编辑，也可以一键复制预设代码(预设扩展页面的预设和编辑页面的预设互不干扰)
- ✅ 增加盒子渐变模式全屏/退出全屏预览模式(PC端鼠标右键预览区域，移动端双击预览区域，全屏/关闭全屏同理)

### v1.1.0 (2026-7-21)
- ✅ 扩展至六种渐变类型，新增锥形渐变及重复锥形渐变
- ✅ 添加更多预设
- ✅ 添加对文字渐变的支持(盒子渐变、文字渐变双模式自由切换)
- ✅ 优化一些已知BUG

### v1.0.0 (2026-7-20)
- 🎉 首次发布
- ✅ 支持四种渐变类型
- ✅ 多图层叠加和拖拽排序
- ✅ 色标可视化拖拽调整
- ✅ 30+内置渐变预设
- ✅ 背景平铺配置
- ✅ 深浅主题切换
- ✅ 中英文双语支持
- ✅ 右键快捷菜单
- ✅ 移动端触摸适配

## 📄 开源协议

本项目基于GPL3.0开源，可自由用于个人和商业项目，保留版权声明即可。

## 🙏 致谢

- [Remix Icon](https://remixicon.com/) - 提供精美的开源图标
- 所有贡献者和使用者的支持
---

如果这个工具对你有帮助，请给个 ⭐️ Star 支持一下！