---
title: "ChromaKey"
canonical_url: https://docs.zvid.io/docs/structure/properties/chroma-key/
source: docs/structure/properties/chroma-key.md
content_revision: 6338386a1dd87e4a
---

# ChromaKey

`chromaKey` removes pixels that match a target color, which is useful for green-screen style effects.

```typescript
interface ChromaKey {
  color: string;
  similarity?: number;
  blend?: number;
}
```

| Property     | Required | Range/format | Notes                            |
| ------------ | -------- | ------------ | -------------------------------- |
| `color`      | Yes      | hex color    | Example: `"#00ff00"`.            |
| `similarity` | No       | `0` to `100` | Higher values match more colors. |
| `blend`      | No       | `0` to `100` | Softens the keyed edge.          |

## Example

Property fragment for a media visual. `similarity` and `blend` are unitless
amounts on a 0–100 scale, not 0–1 fractions; supply them explicitly for a
repeatable look. The preview demonstrates this feature with its recorded fixture.

```json
{
  "chromaKey": {
    "color": "#00ff00",
    "similarity": 18,
    "blend": 8
  }
}
```

## Used By

- [Image Elements](https://docs.zvid.io/docs/structure/image-elements/)
- [Video Elements](https://docs.zvid.io/docs/structure/video-elements/)
- [GIF Elements](https://docs.zvid.io/docs/structure/gif-elements/)
- [SVG Elements (deprecated)](https://docs.zvid.io/docs/structure/svg-elements/)

For [HTML elements](https://docs.zvid.io/docs/structure/text-elements/), use CSS (`background`, `mix-blend-mode`)
through [`customCode`](https://docs.zvid.io/docs/structure/text-elements/#native-css--javascript-customcode)
instead of `chromaKey`.


A green-screen clip keyed over a background video (the green source was itself rendered by Zvid)

[Watch rendered example](https://cdn.zvid.io/library/docs/chroma-demo.mp4)