首页 / 颜色设计 / CSS渐变生成器

CSS渐变生成器

免费的在线CSS渐变生成器，支持线性渐变和径向渐变可视化编辑，实时预览效果，一键复制CSS代码，包含15+预设渐变模板。

相关工具

  • 图片压缩器
  • SVG 查看器
  • 图片转 Base64
  • Base64 转图片
  • 图片缩放工具
  • Favicon 生成器

常见问题

Q：线性渐变和径向渐变怎么选？
A：线性渐变适合创造方向感和层次感，常用于页面背景和按钮。径向渐变适合创造聚焦效果和光晕效果，常用于卡片装饰和弹窗遮罩。根据设计需求选择。
Q：如何实现硬边渐变（不模糊过渡）？
A：将两个相邻色标设置为相同位置即可。如linear-gradient(90deg, red 50%, blue 50%)会在50%处产生硬边分割，而不是模糊过渡。
Q：渐变可以用在文字上吗？
A：可以。使用-webkit-background-clip: text将渐变裁剪为文字形状，配合-webkit-text-fill-color: transparent显示渐变文字。这是目前的标准做法。
Q：45deg和to top right有什么区别？
A：45deg是精确的角度值，to top right是关键字。理论上它们指向同一方向，但实际计算有细微差异：45deg基于几何角度计算，关键字基于元素对角线。正方形元素中两者完全一致。
Q：如何让渐变动画？
A：background-size设为200%配合background-position的transition/animation可以实现渐变动画效果。CSS渐变本身不能直接transition，但可以通过移动背景位置模拟。