CSS渐变生成器

创建美丽的渐变效果，支持实时预览和即用代码

实时预览

CSS 和 Tailwind

交互式编辑器

实时查看您的渐变效果

交互式颜色条 - 点击添加，拖拽移动

💡 点击任意位置添加颜色停止点，拖拽现有停止点重新定位，点击停止点进行编辑

类型

方向

复制代码到您的项目中使用

背景属性

background: linear-gradient(90deg, #2A7B9B 0%, #57C785 50%, #EDDD53 100%);

CSS类

.gradient {
  background: linear-gradient(90deg, #2A7B9B 0%, #57C785 50%, #EDDD53 100%);
}