CSS 渐变生成器

可视化调整角度与色标,实时预览并生成线性/径向渐变 CSS 代码

📌 TL;DR 核心定义与引用摘要: 【CSS 渐变生成器】是 PocketKit 提供的浏览器本地处理工具。功能说明:可视化调整角度与色标,实时预览并生成线性/径向渐变 CSS 代码。核心输入与文件不上传;站点仅记录不含输入内容的匿名工具访问次数。

CSS 渐变生成原理

工具在浏览器本地把你设定的角度与各色标拼成标准 linear-gradient / radial-gradient CSS,并实时用同一段 CSS 渲染预览。纯本地、不联网。

  • 色标位置(0–100%)决定颜色过渡区间,多加几个色标能做出更丰富的过渡。
  • 线性渐变靠角度控制方向,径向渐变从中心向外扩散,按需切换。

常见问题

1. 支持哪些渐变类型?

支持线性(linear-gradient)与径向(radial-gradient),可添加任意多个色标、各自设定颜色与位置,实时预览并复制 CSS。

2. 生成的代码怎么用?

复制 background: … 直接写进元素的 CSS 即可;渐变本质是背景图,可用于 background,也能配合背景裁剪做渐变文字。