Webcam frame maker, a see-through PNG for your stream.

A webcam frame is a PNG picture with a see-through middle that you place above your camera, so the camera shows through the hole and the border sits on top. This webcam frame maker draws one in the exact pixel size you need, as a rounded box or an oval, with a solid, gradient or double line, an optional glow, shadow and name tag. It makes still frames only, not animated ones. Everything is drawn in your browser.

How to make a webcam frame

1. Under Size, pick a ratio: 16:9, 4:3, 1:1 or 9:16. Then choose the pixel size from the list, or Custom size for any width and height from 64 to 4096.
2. Under Frame, choose the shape and the line, then set the thickness, the corner roundness and the space around the frame. Pick one colour, or two for a gradient.
3. Add a glow or a shadow if you want. Both fall only outside the see-through middle.
4. Turn on Show a name tag, type the text and pick its place, font and colours.
5. Press Download the PNG. Download four ratios as a ZIP saves the same look at 1920 x 1080, 1440 x 1080, 1080 x 1080 and 1080 x 1920.

The checkerboard, sample scene or picture behind the frame is only for looking. Choose My picture to see the frame over your own photo. It stays in the page and is never saved.

Add the frame in OBS

These steps follow the OBS Studio sources guide, checked 26 Oct 2026 at obsproject.com/kb/sources-guide.

1. In the Sources dock, press the + button at the bottom and choose Image. Pick your PNG.
2. OBS draws a source that is higher in the list on top of the ones below it. Move the image above your camera source, by dragging it or with the arrow buttons.
3. Select the camera, then use Edit, Transform, Edit Transform (Cmd E on a Mac) to put it exactly where the middle of the frame is. The page shows that place under the picture, and Copy the camera area copies it as four numbers: left, top, width and height.

In other apps with layers, such as Streamlabs or a video editor, do the same: put the PNG layer above the camera layer. This page has not been tested inside those apps.

Which size to pick

Pick the size of the place the frame will sit. If it covers your whole scene, match your canvas size. In OBS you can read it under Settings, then Video. If it is a small camera box inside a bigger scene, make the frame at the size of that box, such as 640 x 360 for a 16:9 box, so OBS does not have to stretch it and blur the border.

A worked example

At 1920 x 1080 with Space around the frame at 1.5 and Thickness at 1.6, both are shares of the shorter side, 1080 pixels. The space is 16.2 pixels and the line is 17.28 pixels, so the middle starts 33.48 pixels in from each edge. That leaves 1920 minus 66.96 across and 1080 minus 66.96 down, which the page shows as 1853 x 1013 px, starting 33 px from the left and 33 px from the top. Put a 1853 x 1013 camera there and the border sits exactly on its edge.

Honest limits

• The frame is a still picture. It does not move. A moving border needs video or a browser source, which this page does not make.
• The middle is fully see-through. With glow and shadow both at 100, no pixel inside the box was drawn when this page was checked, apart from the rounded corners where the border itself curves in.
• The name tag uses a font already installed on your computer. The saved PNG matches the preview, but a different computer can show a different font only if you redraw the PNG there.
• A gradient is drawn across the whole picture at the angle you choose, so a thin line may show only part of it.

To put a picture behind your camera instead, try the gradient background maker. To cut a face out of a picture, use remove background.