Skip to main content

Greenscreen

Use the colorKey() effect from @remotion/effects to remove the green background of a video.

Drag the slider below to adjust how close a pixel has to be to the key color to become transparent.

Drag current effect into a layer in the Studio

Greenscreen.tsx
export const Greenscreen: React.FC = () => {
  return (
    <AbsoluteFill>
      <Video
        src="https://remotion.media/greenscreen.mp4"
        effects={[
          colorKey({
            similarity: 0.45,
          }),
        ]}
      />
    </AbsoluteFill>
  );
};

Requirements​

colorKey() uses WebGL2. During rendering, enable WebGL via Config.setChromiumOpenGlRenderer('angle').

See also​