Shot in front of a green or blue screen? Key out the background, put yourself in front of any picture, color or video, and save the result as MP4 or WebM. The key color is detected automatically, and the similarity, smoothness and spill controls work like the chroma key in OBS Studio. Your footage stays on your device.
Last updated:
0:00 / 0:00
Key color
Click the background in the preview to sample its color.
New background
Person / foreground
Output
Your video
Advertisement
Advertisement
How to use the Green Screen Video Editor
Choose your green screen video. The key color is detected from the edges of the frame.
Fine-tune the key: raise Similarity until the background disappears, use Smoothness for soft edges and Spill reduction to remove green fringes. Check the Key mask view: the background should be black and the person solid white.
Pick a new background: a color, an image or a video, and how it should fit.
Position the person with the Size and Left / right, Up / down sliders.
Press Create video with new background, keep the tab open while it renders, then press Download video.
The chroma key formula
For each pixel the RGB color (0 to 1) is converted to chroma values with the BT.709 coefficients used for HD video:
Cb = −0.1006 R − 0.3386 G + 0.4392 B + 0.502 Cr = 0.4392 R − 0.3989 G − 0.0403 B + 0.502
The distance d between the pixel's (Cb, Cr) and the key color's (Cb, Cr) is averaged over a 3 × 3 block to reduce noise. Then, with s = Similarity ÷ 1000 and m = Smoothness ÷ 1000, the opacity is alpha = clamp((d − s) ÷ m, 0, 1)1.5. Spill reduction blends the pixel towards its own grey value by the same curve using the Spill value, which removes the colored fringe without changing pixels far from the key color.
Recommended starting values
Footage
Similarity
Smoothness
Spill reduction
Evenly lit studio green screen
300–400
60–100
100
Fabric screen with wrinkles or uneven light
400–520
80–150
100–150
Fine hair, motion blur
350–420
120–200
150–250
Blue screen
300–420
60–120
80–120
Green-screen stock clips (animations, logos)
200–350
40–80
50–100
These are starting points; always finish by checking the Key mask view while the video plays, because a key that looks perfect on one frame can flicker on another.
Getting the best result
Match the lighting. If the new background is a sunny beach, a softly lit indoor shot of the person will look pasted on. Pick backgrounds with similar light direction and color.
Match the perspective. Use Size and position to put feet on the floor of the new scene, or crop the person at the waist with the Up / down slider.
Background videos loop automatically if they are shorter than your clip; a calm, slow background is less distracting.
Frequently asked questions
How does chroma keying work?
Every pixel is converted from RGB to the YCbCr color space, which separates brightness (Y) from color (Cb and Cr). The tool measures how far each pixel's Cb/Cr color is from the key color, averaged over the pixel and its 8 neighbours. Pixels closer than Similarity become transparent, a band of width Smoothness fades from transparent to opaque, and everything further away stays solid. Because brightness is ignored, shadows and creases on the screen are removed too.
What do Similarity, Smoothness and Spill reduction do?
Similarity sets how close to the key color a pixel must be to disappear: raise it until the whole screen is gone, but stop before parts of the person vanish. Smoothness softens the edge so hair and motion blur look natural. Spill reduction removes the green or blue light reflected onto skin, hair and clothes by desaturating pixels that are close to the key color.
Why are there holes in the person?
Something in the foreground is too close to the key color, for example green clothes, a plant or a strong green reflection. Lower Similarity a little, check the Key mask view, and avoid wearing green in front of a green screen (or blue in front of a blue one).
Should I use a green screen or a blue screen?
Green is the most common because camera sensors capture green with the most detail and it is far from skin tones. Blue is better when the subject wears green, and it reflects less light onto the subject. Choose the preset that matches your screen, or let automatic detection pick the exact shade.
Tips for a clean key when filming?
Light the screen evenly with no hot spots or dark corners, keep the person at least 1 to 2 metres in front of it to avoid shadows and spill, iron or stretch out wrinkles, and use a fast shutter speed so motion blur is smaller. Even lighting matters more than the exact shade of green.
Why does saving take as long as the video?
The browser plays the video in real time, keys every frame on the GPU, draws it over the new background and records the result with the MediaRecorder API. A 1 minute clip takes about 1 minute; keep the tab visible while it renders.
Is my video uploaded?
No. Keying and encoding happen entirely in your browser using WebGL and the MediaRecorder API. Your videos and background images never leave your device.
Are all the tools on FreeToolCabin tested for quality and accuracy?
Yes! Every tool on our site undergoes automated Q/A testing in real browser environments to ensure high precision, correct output, and zero errors. If you happen to spot a bug or have a suggestion, please contact us at [email protected] and our team will review it right away.