CSS 渐变色生成器

可视化调线性径向渐变，实时预览并一键复制 CSS 代码

CSS 渐变色生成器是做什么的

写 landing page 或按钮背景时，手工拼 linear-gradient 那串参数很容易在角度和色值上反复试错。这里直接用取色器选两到三个颜色，角度拖到顺手的位置，大色块实时预览，下面就是拼好的完整 CSS 语句，点一下复制贴进样式表就能用，不用再对着设计稿肉眼猜色值。

除了常用的线性渐变，径向渐变也支持，做光晕、球面高光这类背景很省事。自己调不出来的时候，底部准备了六组实测好看的预设配色，从落日橙粉到暮夜蓝，点一下整组换色，再基于它微调角度就是自己的风格。所有计算都在浏览器本地完成。

可视化调线性径向渐变，实时预览并一键复制 CSS 代码

复制到代码里直接能用吗？

可以，输出的是完整的 background: linear-gradient(...) 语句，直接粘到任意元素的样式里即可；linear-gradient 是 CSS3 标准属性，现代浏览器全部原生支持，不需要再加 -webkit- 前缀。

为什么径向渐变下角度滑条没了？

radial-gradient 由中心点向外扩散，没有方向角度的概念，所以切到径向时角度滑条会隐藏。需要方向感的渐变就选线性，需要从中心晕开的效果选径向。

预设配色可以再改吗？

可以。点预设只是把颜色、类型、角度填进控制器，之后继续拖滑条或换颜色都会实时重新生成代码，把它当起点随意微调就行。