CSS渐变生成器

使用可视化编辑器创建漂亮的CSS渐变。支持线性、径向和锥形渐变。

100% Client-Side
90deg
0deg360deg
0%
100%
background: linear-gradient(90deg, #6366f1 0%, #ec4899 100%);

简介 CSS渐变生成器?

CSS渐变生成器让您通过可视化界面创建线性和径向渐变,并自动生成可用的CSS代码。告别手写渐变代码。

使用方法

  1. 选择渐变类型(线性或径向)
  2. 添加颜色节点并调整位置
  3. 调整渐变方向或角度
  4. 复制生成的CSS代码

常见问题

线性渐变和径向渐变有什么区别?
线性渐变沿直线方向过渡颜色,径向渐变从中心点向外扩散。选择取决于设计需求。
如何创建多色渐变?
添加多个颜色节点即可。每个节点可以设置颜色和在渐变中的位置百分比。
渐变CSS兼容所有浏览器吗?
现代浏览器全面支持CSS渐变。IE9及以下需要使用前缀或回退纯色背景。