CSS颜色渐变在线编辑工具 - 可视化渐变生成器

渐变设置
颜色停止点
效果预览
实时预览渐变效果
CSS代码
background: linear-gradient(0deg, #ff0000 0%, #0000ff 100%);
.gradient-element {
  background: linear-gradient(0deg, #ff0000 0%, #0000ff 100%);
}
使用说明
渐变类型
  • 线性渐变: 沿直线方向的颜色过渡
  • 径向渐变: 从中心向外辐射的颜色过渡
  • 圆锥渐变: 围绕中心点旋转的颜色过渡
颜色设置
  • 颜色停止点: 定义渐变中的颜色位置
  • 透明度: 控制颜色的不透明度
  • 位置: 颜色在渐变中的位置百分比
实用技巧
  • 预设渐变: 快速应用常用的渐变效果
  • 实时预览: 所有修改立即显示效果
  • 一键复制: 直接复制生成的CSS代码