> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.templated.io/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Image Effects and Filters

# Image Effects and Filters

Apply visual effects to image layers in the Editor or via API.

## Available Effects

| Effect | Range | Description |
| ---- |
| Blur | 0-20px | Gaussian blur |
| Brightness | 0-200% | Light intensity |
| Contrast | 0-200% | Color contrast |
| Saturation | 0-200% | Color intensity |
| Hue Rotate | 0-360° | Shift colors |
| Sepia | 0-100% | Warm brown tint |
| Grayscale | 0-100% | Black & white |
| Invert | 0-100% | Invert colors |

## In the Editor

1. Select an image layer
2. Click **Image Effects** in the left panel
3. Adjust sliders
4. Use **Presets** for quick effects

## Via API

Use the `filter` property with CSS filter syntax:

```json
{
  "layers": {
    "photo": {
      "image_url": "https://example.com/image.jpg",
      "filter": "blur(2px) brightness(110%) contrast(90%) saturate(120%)"
    }
  }
}
```

## Filter Syntax Examples

**Vintage look:**
```
sepia(40%) contrast(90%) brightness(105%)
```

**High contrast B&W:**
```
grayscale(100%) contrast(150%)
```

**Soft dreamy:**
```
blur(1px) brightness(110%) saturate(80%)
```

**Cool tones:**
```
hue-rotate(180deg) saturate(70%)
```

## Effect Presets

The Editor includes presets like:
* **Vintage** — Warm, faded look
* **B&W** — Classic black and white
* **Vivid** — Enhanced colors
* **Cool** — Blue-shifted tones
* **Warm** — Orange-shifted tones

## Tips

* Effects stack in order they're listed
* Use subtle values for professional results
* Test with different images—effects vary
* Filters are applied at render time