FREE TOOL
CSS渐变生成器
在线生成线性渐变和径向渐变CSS代码，支持多色标控制、角度调节、形状位置设置，实时预览一键复制，前端开发必备工具。
在线生成线性渐变和径向渐变CSS代码，支持多色标控制、角度调节、形状位置设置，实时预览一键复制，前端开发必备工具。
CSS渐变（Gradient）是一种在元素背景上创建平滑颜色过渡的效果，无需使用图片即可实现丰富的视觉层次。CSS支持两种渐变类型：线性渐变（linear-gradient）沿直线方向过渡颜色，径向渐变（radial-gradient）从中心点向外辐射过渡颜色。渐变属于CSS Image类型，可以用在background、border-image、list-style-image等属性中。
CSS中 linear-gradient(angle, ...) 的角度以正上方为0deg，顺时针递增。90deg表示从左到右，180deg从上到下，270deg从右到左。0deg等同于 to top。也可以用关键字如 to right bottom 替代角度值。
径向渐变语法为 radial-gradient(shape size at position, ...)。shape 可选 circle（圆形）或 ellipse（椭圆，默认）。position 控制中心点位置，如 center、top left、50% 50% 等。size 可选 closest-side、farthest-corner 等。通过调整形状和位置可以创建聚光灯、光晕等视觉效果。
background-clip: text 配合渐变可以制作渐变文字CSS渐变完全优于图片背景：体积为零（不产生HTTP请求），可无限缩放不失真，支持实时修改，兼容所有现代浏览器。仅在需要复杂纹理或噪点效果时才考虑图片。
0deg从下到上，90deg从左到右，180deg从上到下。角度表示渐变线的方向，颜色沿垂直于该方向的线过渡。也可以用to top、to right等关键字代替角度值。
circle产生正圆形渐变，从中心点等距辐射；ellipse产生椭圆形渐变，会根据元素宽高自动拉伸。当元素是正方形时两者效果相同，矩形元素时ellipse会填满整个区域。
将渐变设置为background，然后添加 background-clip: text 和 -webkit-background-clip: text，再将color设为transparent。这样渐变就会只在文字范围内显示，实现彩色渐变文字效果。
可以。使用RGBA或HSLA格式定义色标颜色，第四个参数控制透明度（0到1）。也可以使用十六进制8位写法如#FF000080。渐变中混入透明色标可以实现淡入淡出效果。