Remove Background with Chroma Key
The magic happens here. Using professional chroma key techniques, we remove the green background to create a transparent video that floats seamlessly on any website.
What is Chroma Key?
Chroma key (also called "green screen") is a visual effects technique that removes a specific color from video footage. It's the same technology used in movies and TV weather forecasts.
We use FFmpeg, the industry-standard video processing tool, with its chromakey filter to achieve pixel-perfect background removal.
Before & After
Before (Green BG)
After (Transparent)
The FFmpeg Command
Here's the exact command we use to remove the green background:
ffmpeg -i input-with-green.mp4 \
-vf "chromakey=0x00ff00:0.3:0.1,format=yuva420p" \
-c:v libvpx-vp9 \
-pix_fmt yuva420p \
-auto-alt-ref 0 \
-an \
output-transparent.webmParameter Breakdown
| Parameter | Value | Purpose |
|---|---|---|
chromakey |
0x00ff00 |
The exact green color to remove (#00FF00) |
similarity |
0.3 |
Color matching tolerance (0.0-1.0) |
blend |
0.1 |
Edge softening for smooth transitions |
format |
yuva420p |
Pixel format with alpha (transparency) channel |
libvpx-vp9 |
— | VP9 codec (required for transparent WebM) |
💡 Why WebM? WebM is the only widely-supported video format that handles transparency. MP4 doesn't support alpha channels, which is why the final transparent output must be WebM.
Getting Clean Edges
The quality of chroma key removal depends on several factors:
- Consistent green — Using pure #00FF00 throughout avoids patchy removal
- No green spill — Characters shouldn't have green reflections
- Proper similarity value — Too low = green remnants; too high = transparent holes in the mascot
- Blend value — Softens edges to prevent harsh outlines
⚠️ Common Issue: If your mascot has green elements (green eyes, green accessories), we adjust the similarity value or use a different chroma color (blue screen) to preserve those details.
Output Format
After chroma keying, the video has:
- Format: WebM (VP9 codec)
- Transparency: Full alpha channel support
- Resolution: Same as input (1280×720)
- File size: ~1-2MB for 8 seconds
- Browser support: Chrome, Firefox, Edge, Safari 16.4+