gradient · sample · Haiku 4.5 · trial 044 of 100

What the model said

Here's a simple CSS gradient example:

```css
/* Linear gradient from top to bottom */
.gradient-box {
  background: linear-gradient(to bottom, #ff6b6b, #4ecdc4);
  width: 200px;
  height: 200px;
}

/* Diagonal linear gradient */
.gradient-diagonal {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* Radial gradient */
.gradient-radial {
  background: radial-gradient(circle, #ffd89b 0%, #19547b 100%);
}

/* Multi-stop gradient */
.gradient-multi {
  background: linear-gradient(to right, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff);
}
```

The main gradient types are:
- **`linear-gradient()`** — creates a smooth color transition along a line
- **`radial-gradient()`** — creates colors that radiate from a center point
- **`conic-gradient()`** — creates colors that rotate around a center point

Each takes color stops and optional direction/position parameters. Would you like a specific type of gradient for a particular use case?