How the portrait blur works

Each webcam frame is drawn onto a hidden canvas. A box blur is applied to a copy of the frame, then both versions are blended using an elliptical mask - pixels inside the portrait zone stay sharp while those outside transition smoothly to the blurred version.

Adjusting the portrait zone

Use the Portrait Width and Height sliders to size the in-focus ellipse to fit your face and shoulders. Increase Blur Strength for a more dramatic background separation.

Privacy

All processing is performed locally on an HTML5 canvas. No video data is sent to any server.

Comparison to AI segmentation

This tool uses an elliptical mask approach: a fixed ellipse is blended over the blurred frame. This is fast, requires no model download, and works with any background. The trade-off is that the mask doesn’t follow your exact body outline.

AI-based alternatives use neural network segmentation (e.g., TensorFlow.js BodyPix or MediaPipe Selfie Segmentation) to trace the body outline accurately frame-by-frame. They produce much cleaner edges but require downloading a model and significantly more CPU/GPU compute. For most video call use cases, the elliptical mask is sufficient and far lighter on system resources.

Lighting tips

Lighting is the single biggest factor in how well any virtual background looks. Key recommendations:

Face a light source: position a window or lamp in front of you, not behind. A backlit face makes the background blur look uneven.
Three-point lighting: a key light (front-left), fill light (front-right, dimmer), and a backlight (behind you) eliminates shadows and creates a professional-looking separation between you and the background.
Uniform background: a plain wall behind you produces significantly better edge blending than a cluttered bookshelf or patterned wallpaper.

Browser and hardware requirements

The tool uses the Canvas 2D API and runs best in Chrome or Edge on a desktop with a dedicated GPU. On older or lower-powered devices the frame rate may drop below smooth playback. Requirements:

Camera permission must be granted by the user.
The page must be served over HTTPS (or localhost) for getUserMedia to work.
A modern browser (Chrome 90+, Firefox 90+, Safari 15+, Edge 90+) is required.