介绍
gradiate 是一个基于 nodejs 的命令行工具，用于帮助前端开发人员快速生成渐变背景色的 CSS 代码。它可以生成水平、垂直、对角线和扩展四种类型的渐变颜色，并支持自定义起始和结束颜色，以及颜色停靠点和透明度。
安装
在使用 gradiate 之前，需要先安装 nodejs 环境。推荐使用 nvm 来安装和管理 nodejs 的不同版本。
安装 gradiate 命令行工具的方式很简单，在终端中执行以下命令即可：
npm install gradiate -g
-g 参数表示全局安装，这样就可以在任意目录下使用 gradiate 命令。
使用
使用 gradiate 生成渐变背景色的 CSS 代码非常容易，只需要在终端中输入以下命令：
gradiate [type] [start-color] [end-color] [options]
其中，type 表示渐变类型，可以取值为 h（水平）、v（垂直）、d（对角线）和 x（扩展）。start-color 和 end-color 表示起始颜色和结束颜色，可以是任何有效的 CSS 颜色值。options 是一组可选参数，用于定制渐变色的输出。不同的参数之间用空格分隔。
下面分别介绍几种常见的用法。
1. 生成水平渐变背景色
使用以下命令可以生成一个从红色到橙色的水平渐变背景色：
gradiate h red orange
这会输出一段 CSS 代码，形如：
background: linear-gradient(to right, red, orange);
2. 生成垂直渐变背景色
使用以下命令可以生成一个从绿色到蓝色的垂直渐变背景色：
gradiate v green blue
这会输出一段 CSS 代码，形如：
background: linear-gradient(to bottom, green, blue);
3. 生成对角线渐变背景色
使用以下命令可以生成一个从黄色到紫色的对角线渐变背景色：
gradiate d yellow purple
这会输出一段 CSS 代码，形如：
background: linear-gradient(to bottom right, yellow, purple);
4. 生成扩展渐变背景色
使用以下命令可以生成一个从黑色到白色的扩展渐变背景色，起始颜色占比 30%，结束颜色占比 70%：
gradiate x black white --start 30 --end 70
这会输出一段 CSS 代码，形如：
background: radial-gradient(30% 30%, circle farthest-corner at 70% 70%, black, white);
注意，扩展渐变必须使用 radial-gradient，可以通过 --start 和 --end 参数控制起始颜色和结束颜色的渐变占比，取值为 0 到 100。
参考示例
以下是一些常见用法的参考示例：
示例一
生成一个从粉色到紫色的渐变背景色，渐变方向为水平。
命令：
gradiate h pink purple
输出：
background: linear-gradient(to right, pink, purple);
示例二
生成一个从黄色到蓝色的渐变背景色，渐变方向为垂直。
命令：
gradiate v yellow blue
输出：
background: linear-gradient(to bottom, yellow, blue);
示例三
生成一个从红色到绿色的渐变背景色，渐变方向为对角线。
命令：
gradiate d red green
输出：
background: linear-gradient(to bottom right, red, green);
示例四
生成一个从深蓝色到浅蓝色的渐变背景色，渐变类型为扩展。
命令：
gradiate x darkblue lightblue
输出：
background: radial-gradient(circle farthest-corner at 50% 50%, darkblue, lightblue);
示例五
生成一个从红色到橙色的渐变背景色，起始颜色占比 40%，结束颜色占比 60%。
命令：
gradiate h red orange --start 40 --end 60
输出：
background: linear-gradient(to right, red 40%, orange 60%);
总结
gradiate 是一个非常实用的命令行工具，可以帮助前端开发人员快速生成渐变背景色的 CSS 代码，提高工作效率。本文介绍了 gradiate 的安装和使用方法，包含了常见的用法示例，希望对读者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005563c81e8991b448d3218