项目介绍

CSS Gradient Generator 是一款**零依赖、纯静态**的CSS渐变可视化生成工具，帮助前端开发者和设计师快速创建精美的渐变背景效果。无需安装任何软件，打开浏览器即可使用，实时预览效果，一键复制可用的CSS代码。工具支持多图层叠加、多种渐变类型、色标拖拽调整、透明度控制、背景平铺配置等专业功能，内置30+精选渐变预设，让你轻松创造出专业级的渐变效果。

功能特性

核心功能

**六种渐变类型**：

线性渐变、重复线性渐变、径向渐变、重复径向渐变、锥形渐变、重复锥形渐变

**多图层系统**：

支持无限图层叠加，拖拽排序，右键复制/粘贴/删除

**色标管理**：

可视化拖拽调整色标位置，支持颜色选择和透明度调节

**实时预览**：

所有调整即时生效，所见即所得

**一键复制**：

点击预览区或按钮即可复制完整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代码

双击预览区进行全屏/关闭全屏预览(预览模式为文字时无效)

移动端：

拖动预览区进行位置移动 

双击预览区进行全屏/关闭全屏预览(预览模式为文字时无效)