CSS 渐变色库

精选 24+ 款线性渐变配色，点击选中即可复制 background CSS 代码

渐变配色卡片

点击任意卡片选中，下方自动生成 CSS 代码

共 0 款渐变
选中渐变 CSS
未选中任何渐变 
/* 点击上方任意渐变卡片选中 */
广告位

使用说明

  1. 使用顶部搜索框按名称过滤渐变（支持中英文模糊匹配）
  2. 点击任意渐变卡片选中，被选中的卡片会高亮显示边框
  3. 下方 CSS 代码区会自动生成对应 background 渐变代码
  4. 点击"复制 CSS"将 linear-gradient 代码复制到剪贴板
  5. 点击"复制 Tailwind 类"生成对应的 Tailwind 工具类名
  6. 渐变方向统一为 135deg，可直接应用于按钮、卡片、横幅等元素

适用场景

  • 按钮设计：为登录、注册、CTA 按钮添加渐变背景
  • 页面横幅：网站 Hero 区域大背景使用渐变提升视觉
  • 卡片头部：信息卡片顶部使用渐变作为视觉点缀
  • 品牌 LOGO：作为 Logo 或品牌色块的背景填充
  • 移动端引导页：开屏、引导页使用渐变营造氛围

安全保障

  • 本地渲染：渐变数据内置在 JS 文件中，本地直接渲染
  • 隐私保护：不收集、不存储任何用户操作数据
  • 无网络请求：整个使用过程不发起任何外部请求
  • 免费使用：无需注册登录，打开即用

常见问题

渐变方向是固定的吗？

本工具默认使用 135deg（左上到右下）。如需其他方向，复制代码后修改角度即可：0deg 自下向上、90deg 自左向右、180deg 自上向下、270deg 自右向左。也可改为 to right / to bottom 等关键字写法。

支持径向渐变 (radial-gradient) 吗？

本工具仅生成线性渐变 (linear-gradient)。如需径向渐变，可手动修改为 radial-gradient(circle at center, #xxx 0%, #yyy 100%)，或使用 background: conic-gradient(...) 生成锥形渐变。

"复制 Tailwind 类"是什么？

Tailwind CSS 提供了 bg-gradient-to-br from-{color} to-{color} 等工具类语法。点击该按钮会复制形如 bg-gradient-to-br from-[#ff512f] to-[#dd2476] 的字符串，可直接在 Tailwind 项目中作为类名使用。

渐变可以叠加在文字上吗？

可以。使用 background-clip: text; -webkit-background-clip: text; color: transparent; 三个属性组合，即可让渐变显示为文字颜色。注意对旧版浏览器需添加 -webkit- 前缀以保证兼容性。