写 CSS 渐变，角度、色标位置手写——调半天效果不对，还得来回刷新页面看结果。

「CSS 渐变生成」可视化拖拽色标，实时预览，CSS 代码一键复制，渐变效果所见即所得。

🌐 在线使用：https://tools.1024vip.cn/tools/gradient (opens new window)

适合哪些场景

• 按钮背景：做一个好看的渐变按钮，拖拽调色标比写代码快
• 卡片装饰：给页面区块加渐变背景，提升视觉层次
• Hero 区域：首页大图背景渐变，可视化调节比手写快
• 学习 CSS 渐变：边拖拽边看生成的代码，理解渐变语法更快

功能说明

• 线性渐变：支持方向、角度调节，多个色标自由拖拽
• 径向渐变：圆心位置、半径大小均可可视化调节
• 实时预览：调整参数同时预览效果，不用切到浏览器刷新
• 一键复制 CSS：生成的 CSS 代码一键复制，直接粘贴到项目

如何使用

1. 选择渐变类型：线性 / 径向
2. 在预览区拖拽色标，或点击添加新色标
3. 调节角度、位置等参数
4. 点击「复制 CSS」将代码粘贴到项目中

隐私说明

浏览器本地处理，数据不上传。

更多实用工具见 网页版总览，反馈 联系。