CSS 渐变生成器

使用可视化编辑器创建漂亮的 CSS 渐变

0%
100%
background: linear-gradient(90deg, #ff0000 0%, #0000ff 100%);

使用说明

CSS 渐变生成器使用指南

这个工具可以帮助你可视化创建 CSS 渐变。你可以：

  • 选择渐变类型（线性/径向）
  • 添加多个颜色节点
  • 调整线性渐变的角度
  • 调整径向渐变的位置
  • 复制生成的 CSS 代码
  • 实时预览渐变效果

使用方法

  1. 选择渐变类型（线性或径向）
  2. 对于线性渐变：
    • 拖动角度选择器上的蓝点来调整渐变角度
    • 或直接输入具体角度值（0-360度）
  3. 对于径向渐变：
    • 选择渐变的中心位置（中心、顶部、右侧、底部、左侧）
  4. 管理颜色：
    • 点击"+"添加新颜色（最多5个颜色）
    • 使用颜色选择器选择颜色
    • 拖动滑块调整颜色位置
    • 点击"删除"移除颜色（最少2个颜色）
  5. 复制生成的 CSS 或 Tailwind CSS 代码

使用技巧

  • 使用至少2种颜色创建基础渐变
  • 添加更多颜色创建复杂渐变
  • 常用角度：
    • 0° = 从下到上
    • 90° = 从左到右
    • 180° = 从上到下
    • 270° = 从右到左
  • 尝试径向渐变创建圆形效果