CSS渐变生成器
使用可视化编辑器即时生成CSS渐变代码。
0%
100%
预览
CSS代码
background: linear-gradient(to bottom right, #6366f1 0%, #ec4899 100%);
什么是CSS渐变？
CSS渐变是浏览器直接渲染的颜色过渡效果，无需图片。广泛用于背景、边框和UI效果。
CSS渐变类型
线性渐变
颜色沿指定角度或方向直线过渡。使用linear-gradient()定义。
径向渐变
颜色从中心点向外以圆形或椭圆形扩散。使用radial-gradient()定义。
锥形渐变
颜色围绕中心点旋转过渡，类似饼图。使用conic-gradient()定义。
使用方法
选择渐变类型（线性、径向、锥形），调整方向或角度，添加或删除颜色节点，复制生成的CSS代码即可。
CSS渐变使用技巧
使用rgba()或8位hex代码实现透明效果。用逗号分隔可在同一元素叠加多个渐变。
常见问题
什么是CSS渐变？
CSS渐变是使用linear-gradient()、radial-gradient()或conic-gradient()函数创建颜色过渡效果，无需图片文件。
线性渐变和径向渐变有什么区别？
线性渐变沿直线过渡颜色，径向渐变从中心点向外以圆形或椭圆形扩散。
如何给渐变添加透明度？
在颜色节点中使用rgba()值（如rgba(255,0,0,0.5)）或8位hex代码（如#ff000080）。
conic-gradient所有浏览器都支持吗？
所有现代浏览器均支持，包括Chrome 69+、Firefox 83+、Safari 12.1+。
可以在一个元素上叠加多个渐变吗？
可以。在background属性中用逗号分隔，即可在同一元素上叠加多个渐变。
如何创建渐变文字？
将渐变设为background，然后使用-webkit-background-clip: text和color: transparent即可实现渐变文字效果。
什么是颜色节点（color stop）？
颜色节点是在渐变路径的特定位置（%）指定特定颜色的控制点。