How to Make an Animated Webcam Frame for OBS (Sized to Fit)

A webcam frame is a border that sits around your camera: neon edges, a scanning line, corner brackets. The trick that makes it work in OBS is that the frame is a transparent overlay with an opening cut out of it, and your camera sits behind that opening. Get the opening size and position right and the camera fits the frame perfectly.

This guide shows how to generate a frame with an exact opening, check it, and line your webcam up behind it.

Step 1: Decide the opening

Pick where the camera goes on your 1920 by 1080 canvas and how big it is. A common layout is a 16:9 camera box in a corner. This guide uses a 480 by 270 opening, 40 pixels from the left edge and 40 pixels from the bottom edge. The coordinates for the four corners, measured from the top left of the canvas, are:

• Bottom left: X 40, Y 770
• Bottom right: X 1400, Y 770
• Top left: X 40, Y 40
• Top right: X 1400, Y 40

Bigger is not always better. A larger camera hides more of your game, so many streamers go smaller than they first think.

Step 2: Describe the frame with the exact numbers

Give the generator the style and the geometry. Here is a prompt that produces a frame with the opening in the right place:

animated cyberpunk webcam frame in purple and black. The webcam opening is a 480 by 270 pixel rectangle in the bottom left corner of a 1920 by 1080 canvas, 40 pixels from the left edge and 40 pixels from the bottom edge. Everything else on the canvas stays fully transparent.

We tested this exact prompt: the opening came out transparent, in the requested corner and the requested size, and the rest of the canvas was transparent too. Results vary a little each time, so always check the preview. Three habits make results better:

• Always give the canvas size, the opening size and the distances from the edges. Without numbers, the opening can land anywhere.
• Say what should stay transparent. "Everything else stays fully transparent" keeps the frame from painting over your game.
• Say what you do not want. Generated frames can include small decorative text such as "CAM" tags or status labels. If you want a clean border, add "no text or labels".

For other looks, change only the style words, for example thin white line frame with soft corner glows or pink and white pastel frame with floating sparkles, and keep the geometry sentence.

Step 3: Check the opening before OBS

On the Overlays page, the preview shows your frame over a checkerboard. The checkerboard should show through the opening and everywhere outside the frame. If the opening is filled, or in the wrong place, refine it with a short note, such as "move the opening to the bottom left corner and make the inside fully transparent". Then copy the overlay URL.

Step 4: Add the frame in OBS

Add the frame as a Browser Source at 1920 by 1080 with the default Custom CSS, exactly as described in how to add an overlay to OBS. Place it above everything else in the Sources box.

Step 5: Put the webcam behind the opening

• Add a Video Capture Device source and choose your camera. Put it below the frame in the Sources list.
• Right-click the camera source, choose Transform, then Edit Transform.
• Set Position X to 40 and Position Y to 770.
• Set Bounding Box Type to Scale to inner bounds and Bounding Box Size to 480 by 270.
• Click Close.

Your camera now fills the opening. If your camera is 4:3 instead of 16:9, use Scale to outer bounds, then trim the extra with the Crop boxes in the same window.

For a snug look with no gap at the edges, make the camera a few pixels bigger than the opening, for example a bounding box of 488 by 278 at X 36, Y 766, and let the frame border cover the overlap.

If something is off

• The camera shows over the frame. The camera source is above the frame. Drag the frame to the top of the Sources list.
• There is a gap or a black line at the edge. Make the camera slightly larger than the opening, as above.
• The frame is blank or old. Right-click the frame source, choose Properties, and press Refresh cache of current page.
• The opening is the wrong size. The Browser Source is not 1920 by 1080, or you need to refine the frame with the right numbers.

Using it live

Overlays are drawn inside OBS, so the frame is part of the single video you send. If you stream to Twitch, YouTube and Kick at once through Sleipnir, all three get the same framed picture. On the Free plan set Rate Control to CBR and Video Bitrate to 5000 in OBS under Settings, Output.

New to streaming without OBS? You can go live from your browser first and add a frame like this when you move to OBS.