🧰 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渐变代码。

可以设置每个颜色停靠点的位置吗？

可以。每个颜色停靠点都有一个从 0 到 100（百分比）的位置输入框。你可以按需添加或删除停靠点，至少保留 2 个。生成的 CSS 始终包含每个停靠点的位置。