What is a Twitch overlay?

A Twitch overlay is the layer of graphics your streaming software draws on top of your gameplay before the video ever leaves your computer. The border around your webcam, the bar across the top with your name on it, the box where chat scrolls, the animation that fires when somebody follows. That is the overlay.

Most of what confuses people about overlays follows from the last part of that sentence. Twitch does not receive your overlay. It receives one flat video with the overlay already baked into it, in the same way it would receive a recording of your desktop. Nobody watching can switch it off, drag it out of the way or click on it. By the time it reaches them it is just pixels in a video.

The question gets asked about Twitch more than anywhere else, so that is the wording here. Almost none of it is Twitch-specific. The compositing happens in your software rather than on the platform, so the same set of files works on YouTube, Kick and TikTok, or on all of them at once.

Every part of an overlay, labeled

Here is a generic layout with every region marked. On the left is what a desktop or TV viewer gets. On the right is the same broadcast on a phone, which is a newer problem and has a section of its own further down. The numbers on the diagram match the list underneath it.

Nearly all twitch overlays arrange that same short list of parts. What differs between one pack and the next is the art, the animation and how well the pieces were designed to sit together. The anatomy barely changes.

The parts that are not on screen right now

A pack holds more than the live layout. Three of the pieces people use most never show up in the diagram above, because they replace the layout instead of sitting on top of it.

Full-screen scenes

Starting soon, be right back, intermission and stream ending are whole screens that take over the frame. In your software each one is a separate scene, and you switch to it the way you would switch to a different game.

The starting screen and the be right back screen tend to earn their keep faster than anything else in a pack. They are the only assets a viewer will sit and look at with nothing else happening, and somebody arriving three minutes before you go live is looking at one of them.

The stinger transition

A stinger is a short clip, usually a second or two, that plays over the cut between two scenes. It sweeps in, hides the switch underneath it, sweeps back out. Software plays the clip and swaps the scene at a set point partway through, so the change happens while the screen is covered. There is a fuller explanation in what are stinger transitions.

The offline banner

A still image that sits on your channel page when you are not live. It is not part of the broadcast at all. It is also the only asset in the pack a stranger can find while you are asleep, which is a reasonable argument for not leaving it as the Twitch default.

How the graphics actually reach the screen

OBS Studio and Streamlabs Desktop work the same way underneath. You build scenes, and a scene is a stack of sources. A source is one thing: your camera, the game, an image file, a web page. Sources higher in the list are drawn over sources lower down, so an overlay is nothing more exotic than a handful of sources sitting above your game capture.

Three source types carry almost every overlay.

• An image source for anything that holds still. OBS documents support for .png, .jpg, .jpeg, .bmp, .tga and .gif, with alpha channel support where the format has one.
• A media source for anything that moves. The documented video formats are .mp4, .mov, .mkv, .webm, .flv, .avi, .ts and .gif.
• A browser source for anything that has to change while you are live. The OBS knowledge base describes it as "quite literally, a web browser that you can add directly to OBS", and its guide to sources lists stream alert overlays and chat boxes as the main things people point one at.

That third type is why a modern overlay is only partly made of files. An image cannot know who just subscribed. A web page can. Alerts, chat boxes, follower goals, latest-sub labels and now-playing widgets are all pages hosted by Streamlabs or StreamElements, rendered inside your streaming software over the top of your game. OBS puts a default snippet of custom CSS on every browser source that sets the page background to transparent and hides the scrollbars, which is the reason a white rectangle does not appear over your gameplay.

So a pack is roughly half files and half account setup. The artwork you place yourself. The live parts arrive as URLs from whichever alert service you use. Packs sold here ship an OBS scene collection file, so the whole arrangement imports in one go through Scene Collection > Import rather than being rebuilt source by source, and the same file loads in Streamlabs Desktop. StreamElements runs the other way round: you assemble the overlay in their web editor and paste a single browser source URL into OBS. The step-by-step version of all of this lives in how to make a Twitch overlay and the best OBS Studio settings.

Still or animated, and what that costs you

A still overlay is a set of PNG files with transparent areas. It costs your machine almost nothing and it never moves in the corner of somebody's eye. Plenty of large channels run exactly that.

An animated overlay is video. A looping camera border or a header with something pulsing in it is a WebM or MOV file being decoded on every frame you broadcast, on top of the game you are already running and the encode you are already doing. Browser sources are heavier again, because each one is a browser window. OBS gives every browser source a custom frame rate option that defaults to 30fps and a "shutdown source when not visible" checkbox that defaults to off, and both are worth knowing about if your scenes start feeling sluggish.

One format trap is worth knowing before you buy anything. A GIF only supports on-or-off transparency, one bit per pixel, so it cannot hold a soft edge. An animated element delivered as a GIF gets a hard jagged outline against your gameplay. WebM and MOV both carry a real alpha channel and do not.

What vertical streaming changed

Until recently a stream overlay meant one thing: a 1920 by 1080 arrangement. That is no longer the whole job.

Twitch now runs Dual Format streaming, which sends two versions of your broadcast at the same time, one horizontal and one full-screen vertical, and gives each viewer whichever suits their device. Phone viewers get the vertical view by default and can tap to switch. It is open to every streamer on Twitch, not only Partners.

The vertical canvas is 1080 by 1920. Your horizontal stream keeps using your normal canvas resolution, and the vertical one is configured separately in your software. Twitch lists a minimum upload of 12.5 Mbps for 1080p dual format, and it requires Enhanced Broadcasting: OBS Studio 32.0.0 or newer with the Aitum Vertical or StreamElements plugin, or Streamlabs, Streamrun, Meld or XSplit without a plugin. Partners and some Affiliates also get server-side transcode support, which shifts the lower quality variants off your GPU and onto Twitch. One thing that is not covered yet: if you broadcast straight from the Twitch mobile app, dual format is not available to you.

The consequence for overlays is simple to state and annoying to deal with. A layout built for 16:9 does not survive being cropped to 9:16. A header that spanned 1920 pixels now spans 1080 in a frame that is nearly twice as tall. A webcam frame parked in the bottom-left corner ends up behind Twitch's own chat, because Twitch draws chat and player controls over the vertical view itself and its guidance is explicit about it: keep anything that matters in the center safe zone, and leave your own chat box out of the vertical layout entirely, since Twitch adds one for you.

Nothing has to be redrawn. The same PNGs and WebMs go into the vertical canvas; the Aitum plugin will pull your existing game capture, camera and alerts straight into a vertical scene, and you can link vertical scenes to their horizontal counterparts so they switch together. What changes is the arrangement, and Twitch's own advice is to start with two or three vertical scenes rather than building a vertical version of everything.

Worth being straight about: most overlay packs on sale anywhere today, including the ones here, ship a single landscape arrangement. A pack that shipped both would be the more complete product, and almost nobody does it yet. Two other details that catch people out: the vertical version of your VOD expires seven days after the stream while the horizontal one keeps its normal retention, and clips taken from a dual format stream exist in both shapes and do not expire.

What is not an overlay

Four things get called overlays and are not.

Twitch panels

Panels are the boxes under the video player on your channel page, holding your socials, your schedule and your rig list. They are part of the channel page, not the broadcast, and they have their own rules: images up to 320 pixels wide and 600 tall, under 1 MB, with descriptions written in Markdown rather than HTML. Packs usually include a set. There is a free Twitch panel maker here if you only need those.

Twitch Extensions

Extensions are the confusing one, because one of the three types Twitch offers is literally called an Overlay Extension. An Extension is a webpage Twitch runs inside its own player on the viewer's device. An Overlay Extension draws over the whole video and only appears while you are live; a Component Extension takes up part of the player. You can have one overlay Extension, two component Extensions and three panel Extensions active at once. The difference that matters is who renders it. An Extension is interactive, arrives separately from your video, and a viewer can minimize it. Your overlay is welded into the video and can do none of those things.

Emotes and badges

Emotes and badges are account assets, not scene files. You upload them to Twitch and they appear in chat rather than on your stream. Emotes are now a single file anywhere from 112 to 4096 pixels square, and sub badges are 18, 36 and 72 pixels. There is more in what are Twitch emotes and the Twitch graphics size guide.

A replaced background

Chroma key is a filter on your camera source, not a layer over your game. It cuts the green out of the camera image before anything else is drawn on top, so it belongs to the camera rather than to the overlay. That process is covered in how to use a green screen in OBS and Streamlabs.

Do you actually need one

People ask this fairly often, usually in the form of whether overlays have gone out of fashion. Plenty of channels with large audiences run little more than a camera border and a set of alerts, so the honest answer is that a heavy layout is optional and always was.

It is still worth having one, for reasons that do not depend on how elaborate it is. A clip gets reshared with no context attached, and a clip with your name in the corner is a clip somebody can act on. A viewer who arrives while you are away from the desk sees something deliberate rather than a frozen frame. Alerts give people a visible reason to follow or subscribe at the moment they are considering it.

What an overlay does not do is bring anyone to your channel. Discovery happens in the directory, in clips, on other platforms and through raids, and nothing sitting inside your own video can change whether somebody finds it in the first place. An overlay improves the experience of people who already arrived. Judged on that, the decision gets easier.

If you want a floor: a webcam frame and one full-screen scene is a complete setup. Everything after that is refinement. It is also possible to overdo it, more so now than before, because Twitch is already drawing its own interface over your video and on a phone it takes the top and the bottom of the frame before you have added anything.

Making one, or buying one

Making your own is realistic if you already use design software. A still layout is a Photoshop, Figma or Canva job with transparent backgrounds and careful attention to where the game's own HUD sits. Animation moves the work into After Effects and exporting to WebM with an alpha channel, which is where most people stop. The route through it is written up in how to make a Twitch overlay.

If you want something on screen tonight without paying, the free overlay packs here include full sets with screens, alerts and a transition, and they work in OBS, Streamlabs and StreamElements the same way the paid ones do.

If you only want one piece rather than a whole set, the stinger transitions and the alert packs are sold on their own.

Whatever you end up with, two checks are worth doing before you commit. Confirm it includes an install file for the software you actually run, because rebuilding twenty sources by hand is an evening you will not get back. And check that the animated pieces are WebM or MOV rather than GIF, so the edges stay soft against whatever is behind them.