设计漂亮的渐变并导出为 CSS 或图像
选择颜色、添加停止点并调整角度或中心点以创建您需要的精确渐变。该工具支持线性、径向和圆锥渐变，具有无限的颜色停止点。复制样式表的 CSS 代码或将渐变下载为高分辨率 PNG 以在设计项目中使用。
免费使用此工具Browser tool
Gradient generator
Create CSS gradients, preview them live, and export a PNG locally in your browser.
background-image: linear-gradient(90deg, rgba(255, 56, 56, 1) 0%, rgba(124, 58, 237, 1) 100%);Starter palettes
如何使用
选择渐变类型
选择线性、径向或圆锥形。对于线性，设置角度；对于径向，设置中心点和形状。
添加和调整颜色
单击渐变栏以添加色标。拖动以重新定位，双击以更改颜色，并调整每个停止点的不透明度。
复制 CSS 或下载
复制生成的 CSS 代码以供 Web 使用，或设置分辨率并将渐变下载为 PNG 图像。
特征
三种渐变类型
创建具有任意角度的线性渐变、具有可调整中心和形状的径向渐变或围绕点扫描的圆锥形渐变。在类型之间切换，预览会立即更新。
无限色标
沿着渐变条添加所需数量的色标。拖动停止点以重新定位它们，双击以更改颜色，或右键单击以删除。每个停止点都支持半透明渐变的不透明度。
CSS代码输出
该工具生成带有供应商前缀的有效 CSS 背景图像代码。复制代码并将其直接粘贴到样式表中。当您编辑渐变时，输出会实时更新。
PNG图像导出
以任何分辨率下载 PNG 渐变 — 从 100 像素缩略图到 4000 像素横幅。在不支持 CSS 渐变的工具中使用图像作为背景、叠加层或设计元素。
After this task
After this free tool, open Ai Enhance for the next AI editing workflow.
Continue with Ai Enhance规格
| 渐变类型 | 线性、径向、圆锥形 |
| 色标 | 无限 |
| 角度范围 | 0–360° |
| CSS输出 | 标准+供应商前缀 |
| 巴布亚新几内亚出口 | 最大 4000 × 4000 像素 |
| 加工 | 客户端（即时） |
Related Magic Eraser Tools
常见问题
我可以创建具有透明度的渐变吗？
+
是的。每个色标都有一个不透明度滑块。将不透明度设置为低于 100% 以在渐变中创建半透明区域。 CSS 输出使用 rgba 值，PNG 导出保留 Alpha 通道。
什么是圆锥梯度？
+
圆锥渐变围绕中心点辐射颜色停止点，就像时钟指针的扫描一样。它对于饼图样式效果、色轮和装饰背景很有用。现代浏览器的浏览器支持非常出色。
我可以在任何框架中使用生成的 CSS 吗？
+
是的。输出是标准 CSS，可在纯 HTML、React、Vue、Tailwind 以及支持内联或基于样式表的 CSS 的任何其他框架中工作。
More free tools
Explore our other limited free edits after sign-in photo and image tools.
在 HEX、RGB、HSL、HSB、CMYK 和 CSS 命名格式之间转换颜色。查看实时预览、复制任何值并导出色卡。
将十六进制颜色代码转换为 RGB 值，反之亦然。实时预览、一键复制和 CSS 片段输出。——可在您的浏览器中使用。
从上传的图像中选择任何颜色并立即获取其十六进制、RGB 和 HSL 代码。从照片构建调色板，用于网页设计、品牌推广和插图。
上传照片并使用十六进制、RGB 和 HSL 代码提取 5-10 个主色。复制样本，导出为 ASE 或 CSS 变量。
生成 URL、文本、WiFi 凭证和 vCard 的 QR 码。自定义颜色、添加中心徽标并下载为 PNG 或 SVG。
计算图像和视频的宽度、高度或纵横比。输入任意两个值并得到第三个值。社交媒体、电影和印刷品的预设比例。