渐变生成器

调整渐变颜色和效果,预览渐变背景,生成网页可用的 CSS。

免费浏览器

线性

简单的方向渐变

预览
颜色色标

#2563eb 0%, #ec4899 100%

形状
CSS 背景
background:
  linear-gradient(135deg, #2563eb 0%, #ec4899 100%);

关于渐变生成器

预览双颜色线性渐变并复制 CSS 背景声明。调整颜色和角度,为页面背景或组件强调区域准备样式。

如何使用渐变生成器

  1. 选择起始色和结束色。
  2. 调整渐变角度,检查预览。
  3. 复制生成的 CSS 到样式表。

输入与输出示例

输入与设置
起始:#ff0000
结束:#0000ff
角度:90°
预期输出
linear-gradient(90deg, #ff0000, #0000ff)

适用场景

  • 探索落地页背景方案。
  • 为卡片准备渐变强调色。

使用前需要了解的限制

工具专注于双颜色线性渐变,不覆盖完整渐变编辑功能,也不检查整个背景上各点的文字对比度。

数据处理与费用

核心操作在浏览器中完成,工具输入不会上传处理。网站仍可能使用会话 Cookie,并按隐私政策收集运行或使用数据。

在浏览器中免费使用,无需登录。

常见问题

工具会生成线性、径向、锥形、多层、网格、极光、金属等现代渐变风格的 CSS background 值。

可以。复制生成的声明后,可用于 CSS background 或 background-image 属性。

是的。预览和 CSS 生成都在浏览器本地完成,不上传颜色值。

相关工具