怎么用？
- 切换线性 / 径向；线性可拖动角度滑块（0–360°）。
- 每个色标都能改颜色（取色器或直接填 HEX）和位置（0–100%）。
- 点「+ 加色标」增加渐变层次，最少保留两个色标。
- 点「复制 CSS」把
background: …复制到剪贴板。
线性 vs 径向渐变怎么选？
线性渐变（linear-gradient）沿一条直线过渡，最常用于按钮、
Hero 背景、卡片描边；135deg 是最常见的「左上到右下」方向。
径向渐变（radial-gradient）从中心向外扩散，
适合做光晕、聚焦高光、圆形装饰。
渐变性能与可访问性要注意什么？
渐变是纯 CSS，不产生额外网络请求，性能几乎无损；但大面积
radial-gradient 叠加动画可能增加重绘成本，移动端慎用。
若渐变上要叠文字，务必保证文字与渐变任一处的对比度 ≥ 4.5:1
（参考本站深色主题按钮为何用 --accent-button 而非 --accent）。
关于 chdh.me 在线工具
本工具是 出海导航 chdh.me 免费在线工具集的一员， 与 中国传统色、 Base64 编码/解码 等一样纯前端运行、不上传数据、不追踪。 chdh.me 是面向跨境电商 / 独立站 / 出海创业者的独立工具评测与发现平台， 纯公益 · 不接联盟 · 不接付费收录。