Green Screen / Chroma Key Tool - Webcam Background Remover

How to use this tool

1. Click Start Camera and allow webcam access.
2. Choose a key color preset, or click Pick from video and sample the backdrop in the preview.
3. Adjust Threshold to remove the backdrop, then raise Softness to blend its edges. Set Softness to 0 for a hard cutoff.
4. Choose Color for a solid replacement or Image to select a local background picture; images are scaled to cover the frame.
5. Use Flip, Brightness, Contrast, Grid, size, and zoom controls to refine the preview, then take a PNG snapshot if needed.

How chroma keying works

Chroma keying (commonly called "green screen") works by identifying pixels in the video frame that are close in color to the selected key color, then blending those pixels with a replacement color or selected background image. This tool compares RGB colors using Euclidean distance: the square root of the summed squared red, green, and blue channel differences. The Threshold sets the distance for full replacement; Softness adds a linear fade band above it. For example, with a threshold of 80 and softness of 40, a pixel at distance 100 is blended halfway between the camera subject and the replacement. A softness of zero restores the hard threshold edge.

To use an image, choose Image under Replacement background and select a file from your device. The browser decodes it locally and scales it to cover the camera frame, cropping the excess along the wider dimension. Choose Color to return to a solid fill, or clear the selected image when you no longer need it. A common use is placing a speaker over a branded slide or a room scene while keeping the keyed camera subject visible.

Threshold and Softness cannot distinguish the backdrop from clothing or props with similar colors, so a physical, evenly lit screen still gives the best result. Sample the actual backdrop with Pick from video to account for room lighting. The tool keeps camera pixels opaque while mixing the replacement behind keyed and partially keyed edges; it does not create a transparent matte or remove green spill from the subject.

Tips for a clean key

• Use a uniform, well-lit background - shadows and wrinkles create color variation.
• Keep the subject away from the background to avoid color spill.
• Start with a low threshold and increase it gradually until fringing is minimised.

Privacy

Camera frames and any selected replacement image are decoded or processed with browser APIs on this page. No camera or image data leaves your device.

Background color choices: green vs. blue

Green is the dominant choice for modern chroma key work because:

• Green is the rarest color in human skin tones and hair, minimizing the risk of accidentally keying out parts of the subject.
• Digital camera sensors have twice as many green photosites as red or blue (Bayer pattern), making the green channel the cleanest and easiest to key.
• Green reflects more light than blue, requiring less lighting power.

Blue screen is preferred when the subject is wearing green, or in certain film contexts where the blue channel is cleaner for specific film stocks or lighting setups. Blue also blends better with the natural sky in outdoor compositing.

Spill and despill advice for editors

Color spill occurs when green or blue light reflects off the background screen and tints the edges of the subject. It appears as a green halo around hair, shoulders, or translucent clothing. This webcam preview does not include a despill control; the software suggestion below applies to video editors and advanced keyers. To minimize spill during recording:

• Keep the subject as far from the background as possible (2–3 meters minimum).
• Avoid tight backgrounds with insufficient lighting - even lighting prevents hot spots.
• In a video editor or advanced keyer, despill can shift affected edge pixels toward a complementary color (for example, adding magenta for green spill).

Common mistakes

• Uneven lighting: shadows and highlights on the background create different shades of green, making a single color threshold insufficient. Aim for flat, even lighting across the entire background.
• Wrinkled background: wrinkles create shadows and uneven color. Stretch the screen taut or use a painted wall or a ring-lit curved backdrop.
• Subject too close to background: increases spill and makes it harder to light the subject independently of the background.