免费 CSS 渐变生成器

CSS 渐变类型详解

CSS 渐变可以在不使用图像文件的情况下创建平滑的颜色过渡。它们与分辨率无关，渲染速度快，易于自定义。background 属性直接接受渐变函数——无需额外标记。

CSS 中有三种渐变函数：linear-gradient() 沿任意角度的直线渲染颜色。radial-gradient() 从中心点向外以椭圆或圆形辐射颜色。conic-gradient() 围绕中心点扫描颜色，就像时钟的指针——非常适合饼图和色轮。

每种渐变都接受多个颜色节点——由颜色和可选位置（百分比或长度）组成的配对。浏览器会在相邻节点之间平滑插值。您可以通过在同一位置放置两种不同颜色来创建硬边缘。

线性渐变 vs 径向渐变 vs 锥形渐变

线性渐变是最常见的类型。它们沿由角度定义的直线流动（例如，90deg 为从左到右，180deg 为从上到下）。适用于横幅背景、按钮和叠加层。

径向渐变从中心点向外辐射。默认为匹配元素纵横比的椭圆，但可以强制为圆形。非常适合聚光灯效果、发光和装饰性背景。

锥形渐变围绕中心点旋转颜色节点。它们是最新添加的类型（所有现代浏览器均支持），非常适合饼图、色轮和艺术效果。起始角度默认为 0deg（顶部），但可以通过 from Xdeg 更改。

常用渐变 CSS 示例

名称	预览	CSS
日落		linear-gradient(135deg, #f97316, #ec4899)
海洋		linear-gradient(180deg, #0ea5e9, #1d4ed8)
森林		linear-gradient(135deg, #22c55e, #15803d)
薰衣草		linear-gradient(135deg, #a78bfa, #7c3aed)
蜜桃		linear-gradient(135deg, #fb923c, #f97316)
浆果		linear-gradient(135deg, #ec4899, #be185d)

什么是 CSS 渐变？

CSS 渐变是由浏览器渲染的两种或多种颜色之间的平滑过渡，用作背景图像。CSS 支持线性、径向和锥形渐变。它们与分辨率无关，轻量级，不需要图像文件。

如何创建透明渐变？

使用 rgba() 或 hsla() 颜色值，将 alpha 设为 0 以实现透明。示例：linear-gradient(to right, rgba(79,110,247,1), rgba(79,110,247,0))。您也可以使用关键字 "transparent" 作为颜色节点。

什么是锥形渐变？

锥形渐变围绕中心点扫描颜色过渡，类似饼图。与向外辐射的径向渐变不同，锥形渐变是旋转的。语法：conic-gradient(from 0deg, red, blue, red)。所有现代浏览器均支持。

如何向渐变添加多种颜色？

用逗号分隔列出额外的颜色节点。可选择性地为每个节点添加位置：linear-gradient(90deg, #ff0000 0%, #00ff00 50%, #0000ff 100%)。浏览器会在相邻节点之间平滑插值。

如何将渐变用作文字颜色？

将渐变应用为背景，然后裁剪到文字上：background: linear-gradient(...); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: transparent。渐变会透过文字形状显示出来。