🌈

CSS渐变生成器

创建并预览 CSS 线性和径向渐变。复制即用型 CSS 代码。

设计工具 本地运行 不发送数据
CSS 渐变 线性 径向 设计
渐变类型
方向
●
色标
CSS 输出

什么是 CSS渐变生成器？

创建并预览 CSS 线性渐变和径向渐变。添加色标、选择方向，并即时复制可直接使用的 CSS 代码。

如何使用渐变生成器

  1. 选择线性或径向渐变。
  2. 添加或调整色标，直到混合效果满意。
  3. 在实时预览中微调角度、位置或扩散值。
  4. 准备好用于项目时，复制生成的 CSS。

相关工具

🎨
调色板生成器
生成互补色、类似色和三角色配色方案
 🎨
颜色选择器
在 HEX、RGB、HSL 和 CMYK 之间转换颜色
 ⚖️
WCAG对比度检查
检查 WCAG AA 和 AAA 颜色对比度比值，保障无障碍性
了解 CSS 渐变 ▾
示例
输入 线性，90°，色标：#6366F1 → #8B5CF6
输出 background: linear-gradient(90deg, #6366F1, #8B5CF6);
常见使用场景
  • 为营销页面创建首屏背景渐变
  • 在编辑 CSS 文件前测试角度和色标调整
  • 生成精致的按钮或卡片背景
  • 无需手动转换，即可与开发者共享精确的渐变 CSS
常见问题
我需要像 -webkit-linear-gradient 这样的浏览器厂商前缀吗？

不需要 — 所有现代浏览器（Chrome、Firefox、Safari、Edge）都支持无前缀的 CSS 渐变。只有非常旧的浏览器（IE 9 及以下）才需要厂商前缀。

可以使用透明色标吗？

可以 — 使用 alpha 值为 0 的 rgba() 或 hsla() 颜色来创建淡出至透明的效果。例如：rgba(99, 102, 241, 0) 会让靛蓝色逐渐变为不可见。

可以将此渐变用于文字吗？

可以 — 复制渐变值，并将其用于以下 CSS 属性：background: linear-gradient(...); -webkit-background-clip: text; -webkit-text-fill-color: transparent;

色标的最大数量是多少？

此工具最多支持 6 个色标。CSS 本身没有硬性限制 — 浏览器支持包含数十个色标的渐变，但性能可能有所不同。