🧰 UtlKit

CSS 渐变生成器

创建漂亮的 CSS 渐变。支持线性和径向渐变，实时预览。

颜色节点
%
%
background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);
🐛

报告问题 / 提出建议

发现 Bug 或有建议？帮助我们改进这个工具。

📊 数据摘要（自动填写）

工具: gradient-generator · /tools/gradient-generator/

type: linear

angle: 135

stops: [object Object],[object Object]

radialShape: ellipse

这是什么工具？

CSS 渐变生成器创建带有可视化预览的线性和径向渐变背景。生成可用于生产的 CSS 代码。支持多色停、角度和透明度。对现代 Web 设计至关重要。

如何使用

  1. 1

    添加颜色

    点击添加颜色停到渐变。

  2. 2

    调整设置

    设置角度、类型（线性/径向）和位置。

  3. 3

    复制 CSS

    获取生成的 CSS 代码。

常见问题

什么是 CSS 线性渐变？

线性渐变沿着直线在两种或多种颜色之间平滑过渡。语法：background: linear-gradient(angle, color1, color2, ...)。常见角度：0°（下到上）、90°（左到右）、180°（上到下）。

能在CSS用吗？

可以，生成标准CSS渐变代码。

处理后质量会降低吗

无损操作保留质量。有损压缩减小文件但略降质量。