CSS渐变生成器 - 在线渐变背景生成工具

渐变设置

颜色停止点

效果预览

实时预览渐变效果

CSS代码

background: linear-gradient(0deg, #ff0000 0%, #0000ff 100%);
.gradient-element { background: linear-gradient(0deg, #ff0000 0%, #0000ff 100%); }

使用说明

渐变类型

  • 线性渐变: 沿直线方向的颜色过渡
  • 径向渐变: 从中心向外辐射的颜色过渡
  • 圆锥渐变: 围绕中心点旋转的颜色过渡

颜色设置

  • 颜色停止点: 定义渐变中的颜色位置
  • 透明度: 控制颜色的不透明度
  • 位置: 颜色在渐变中的位置百分比

实用技巧

  • 预设渐变: 快速应用常用的渐变效果
  • 实时预览: 所有修改立即显示效果
  • 一键复制: 直接复制生成的CSS代码

您最近使用了：

收藏 菜单 QQ