CSS 渐变生成器

拖动滑块，上方的预览会跟着变化。满意之后复制那一行，粘贴进样式表就行了，不需要别的。

角度: 90°

角度用于线性和锥形渐变，径向渐变从中心扩散。

色标

CSS

使用方法

渐变常常以透明色收尾，而在纯白底上，透明和不透明看起来一模一样。棋盘格会从颜色不实的地方透出来，于是你设成什么就看到什么 — 图像编辑软件正是为此才养成这个习惯。

CSS 不会替你调整色标顺序：写在 70% 之前的 30% 色标会被浏览器夹住，渐变就悄悄少了一种颜色。这个工具在拼接那一行时按位置排序色标，所以把某个滑块拖过邻居也不会让结果出问题。

三种类型有什么区别？

线性渐变沿直线延伸并接受角度：90deg 从左到右，180deg 从上到下。径向渐变从中心呈圆形扩散，适合光晕和聚光效果。锥形渐变像钟表指针一样绕点旋转，饼图和色轮就是用它做的。

怎么做带透明度的渐变？

如果浏览器的取色器支持透明度，直接调低即可；也可以手动改复制出来的那一行：rgba(31, 95, 214, 0) 和实色一样可以做色标。渐隐到透明比渐隐到白色更有用，因为它在任何背景上都成立。

能用作文字颜色吗？

可以，再加两行：把渐变写在 background-image 上，然后加 background-clip: text 和 color: transparent。文字保持原来的形状，渐变从字形里透出来。

为什么同样的角度在径向模式下看起来不一样？

径向模式下角度根本不起作用。径向渐变从中心出发，没有方向可言，所以角度留给线性和锥形使用，在那里它决定从哪里开始。