gradient · sample · Haiku 4.5 · trial 060 of 100

What the model said

Here are some common CSS gradient examples:

**Linear Gradient (left to right):**
```css
background: linear-gradient(to right, #ff0000, #0000ff);
```

**Linear Gradient (diagonal):**
```css
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
```

**Radial Gradient (circular):**
```css
background: radial-gradient(circle, #ff6b6b, #4ecdc4);
```

**Radial Gradient (elliptical):**
```css
background: radial-gradient(ellipse at center, #667eea 0%, #764ba2 100%);
```

**Conic Gradient (like a color wheel):**
```css
background: conic-gradient(#ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff0000);
```

**Linear with multiple color stops:**
```css
background: linear-gradient(to right, red 0%, yellow 25%, lime 50%, cyan 75%, blue 100%);
```

The basic syntax is:
- **Linear**: `linear-gradient(direction, color1, color2, ...)`
- **Radial**: `radial-gradient(shape size at position, color1, color2, ...)`
- **Conic**: `conic-gradient(from angle, color1, color2, ...)`

Which type would you like to use?