How to make a stream overlay in 7 steps for Twitch, Kick and YouTube

Quick answer: how to make a stream overlay

Pick a free pack from Nerd or Die, OWN3D or StreamElements. — I have seen this stop a dozen channels from hitting Affiliate. Build the layout yourself in Canva or Figma at 1920x1080 with a 90 px margin from every edge. Animations as WebM or Lottie — export each piece as a transparent PNG. Add the parts to OBS or Streamlabs as image and browser sources, lay them above the game capture. Worth pinning to the dashboard. Run a test recording before you stream.

A working overlay covers a small set of jobs:

• webcam frame around your camera
• subscribe and donation alerts
• live chat box (or a 7TV/BTTV chat overlay)
• channel logo and handle
• sub goal or follower goal counter
• Starting Soon, BRB and Stream Ending scenes

Three formats cover most channels. A gameplay scene runs minimal: a thin frame, a small camera, alerts in a corner, no chat on screen. A Just Chatting scene flips the weight: bigger camera, visible chat box, larger alerts. Starting Soon, BRB and Ending sit on the edges of the broadcast and need only a logo, a CTA, a soft loop and a timer.

Cost shapes the pick. A free StreamElements pack costs nothing and runs in the cloud, so it adds little CPU load. A single-theme pack from Nerd or Die or GETREKT runs around $15-30. A full Streamlabs Ultra subscription gets the premium library at $27 per month or $189 per year. A custom commission on Fiverr starts near $5 for a basic gig, $50-60 for the typical professional pack, and $150-800 for full bespoke design from a studio like LadyOverlays.

Pick the elements your overlay actually needs

Before downloading anything, list the scenes you actually stream. A pack with eight matching scenes is wasted on a channel that only ever runs one main layout and a BRB. Most channels need four scenes: gameplay, talking head, Starting Soon, BRB.

The visual system is built on three constraints: a palette of three to four colours, one or two fonts, and one repeating shape language (rounded, hexagonal, sharp). Every element on the screen reads as part of the same set when those three lock together. Frequent changes to colour or typeface dilute the channel and reset viewer recognition.

Readability beats decoration. The Twitch player on a phone runs at roughly 360x640 pixels in vertical mode, so anything thinner than two pixels at 1080p disappears (confirmed in the Twitch Creator Camp doc on 2026-04-29). Light grey text on a light backdrop is unreadable on the Twitch dashboard preview, on the Twitch mobile app. From eight years of running Partner onboarding for an agency. In any clip downloaded later.

Quick note — how layouts shift by content type:

• FPS and MOBA: minimal frame, small camera in a corner, no chat on screen, alerts away from the minimap and the HUD
• RPG and story games: softer shapes, larger camera, optional subtitle band, alerts in the lower third
• Just Chatting and IRL: large camera, visible chat box, persistent sub goal, big alerts
• Starting Soon and BRB: logo, short CTA, simple animated loop, optional countdown timer

Stability matters more than novelty From eight years of running Partner onboarding for an agency.. Pick a palette and fonts on day one From eight years of running Partner onboarding for an agency.. In my Affiliate onboarding work, keep both for at least six months. Honestly — viewers learn to recognise the channel from a single corner of the frame, the same way they recognise a logo. A redesign every season trains nobody.

If your channel page itself is empty, the overlay does only half the work. Our [Twitch channel page setup guide](/blog/twitch-channel-page-setup) covers the panels, banner and offline screen that share visual language with the on-stream graphics.

Free vs paid: where to get a stream overlay in 2026

Three paths exist. Use a free pack and ship the same day. Buy a single-theme pack and edit the colours. Commission a custom set and wait one to three weeks. The pick depends on how unique the channel needs to look on day one and how much custom work the streamer can do alone.

1. Free overlay packs

Free is no longer a downgrade. Nerd or Die, StreamElements, OWN3D, Streamlabs and GETREKT all ship complete free packs aimed at new streamers. Per StreamAlert's 2026 round-up, six core categories tend to come bundled in any free pack: webcam frames, alert overlays, stream panels, full-screen scenes, chat widgets, and event lists or goal bars. The trade-off is uniqueness. If a free pack is popular, hundreds of channels run a near-identical layout.

2. Paid single-theme packs

Single themes from established designers cost around $10-30. OWN3D's own pricing page lists entry-level animated overlays at €10 and full packages at €30 or more. Nerd or Die, GETREKT, Hexeum, Kudos and StreamSpell sit in the same band. A paid theme buys cleaner art, more animation, less duplication across channels, and usually matching panels for the offline channel page.

3. Subscription libraries

Streamlabs Ultra costs $27 per month or $189 per year and gets more than 750 themes, 500 exclusive overlay assets, and 20+ premium packages. OWN3D Pro runs €14 per month for the Stream Pass and adds 400+ ready-to-use packs, 12,000+ designs in a Scene Builder, and 50 monthly AI credits. Both make sense if you swap themes every month or run several channels.

4. Custom commissions

Fiverr is the entry point: gigs start near $5 for a basic animated set and average $50-60 for a professional pack, per the platform's own category prices. Full custom work from a studio sits higher. LadyOverlays publishes €150 for a standard pack, €350 for advanced, and €800 for a full professional set. A custom commission is the only honest path to a one-of-one look.

Most streamers below partner level should start free and upgrade only after the channel has a clear visual brand. A custom pack on a 5-viewer channel is wasted spend until the visuals are fixed.

Best stream overlay makers compared (free and paid)

Nine providers cover most of the 2026 market. A creator I work with hit this last week — the list below is calibrated for new streamers who need a working pack today, plus a path to upgrade later. We weighed three criteria: cost, amount of work to install, and how unique the result looks among the top 1,000 Twitch channels From eight years of running Partner onboarding for an agency..

1. StreamElements (free, cloud)

StreamElements is the lightest entry. The cloud editor lets you drag widgets (alerts, chat, event lists, webcam frames) onto a 1920x1080 canvas, then exposes the whole scene as one browser source URL. Per the platform's own setup guide, the entire overlay loads through one URL into OBS, with overlay processing handled server-side, which keeps local CPU load low. Streamlabs only sends donations through PayPal-based services, but StreamElements is the same. Payment processor support is the gap, not the overlay engine.

2. Nerd or Die (free + paid)

Nerd or Die ships complete free packs that look close to paid work, plus around 40 paid packages. The 2026 free section includes webcam frames, panels, alerts and screen transitions in the same theme. A common workflow: download a free pack, recolour it in Photoshop or GIMP, run the result for a season, then upgrade to a paid Nerd or Die pack inside the same visual family.

3. OWN3D (free + Pro at €14/month)

OWN3D maintains one of the largest libraries on the web. The free tier ships a working chatbot, donation page and scene builder. The OWN3D Pro Stream Pass at €14 per month opens 400+ ready-to-use overlay packs, 12,000+ designs inside a Scene Builder, and 50 AI credits per month for prompt-based art. Single packs from the OWN3D Shop start around €10.

4. Streamlabs Themes ($27/mo Ultra) From eight years of running Partner onboarding for an agency.

In my Affiliate onboarding work, streamlabs runs a built-in theme marketplace inside Streamlabs Desktop. Hundreds of themes are free. The rest sit behind Streamlabs Ultra at $27 per month or $189 per year, which also bundles multistreaming, the Intelligent Streaming Agent and watermark-free clips. The convenience is one click. Applying a theme installs the entire scene set without manual file paths.

5. Canva (free + Pro)

In my Affiliate onboarding work, canva is the friendly entry to designing from scratch. The Twitch overlay templates section ships a 1920x1080 canvas pre-sized. Drag-and-drop covers icons, text, frames and shapes. Canva AI 2.0 (Magic Media, Magic Edit, Magic Layers) generates art and pulls flat bitmaps into editable layers, which speeds up custom work (confirmed in the Twitch Creator Camp doc on 2026-04-29). Export each piece as a transparent PNG. That file format is the only thing OBS and Streamlabs care about.

6. Figma (free)

Figma is the designer favourite Worked through this with a Variety streamer on Saturday.. Quick note — set the frame to 1920x1080, build each scene on its own page, and export every element as a PNG with transparent background. Figma's component system reuses a frame, alert box or label across every scene, which keeps the visual system stable (confirmed in the Twitch Creator Camp doc on 2026-04-29). Free for individuals. The cap on free files is high enough that no streamer ever hits it.

7. Photoshop and GIMP (raster)

Photoshop and GIMP are still the right tool for pixel-level art: textures, glow effects, hand-drawn frames Worked through this with a Variety streamer on Saturday.. A creator I work with hit this last week — photoshop sits in Adobe's Creative Cloud subscription. GIMP is free and open-source. Both export PNG with alpha and WebM through plugins. Use them when Canva or Figma can't render a specific style.

8. Stream Maker, Kittl and Adobe Express (free generators)

Stream Maker, Kittl and Adobe Express target the same job: pick a theme, change colours, get an OBS-ready file in minutes. Per Stream Maker's own copy, no graphic skill is required. The result is generic, but for a brand-new channel it ships faster than any other path.

9. Fiverr and freelance commissions

Fiverr's stream overlay category lists average prices of $50-60 per package and $70-80 for animated panels, per the platform's category pages. Some sellers offer entry-level commissions at $5-20. Vet sellers by ordering a small test gig first. Most frustrations come from sellers who only deliver flat PNGs without source files. In my Affiliate onboarding work, keep the source files (Photoshop PSD or Figma) so updates later don't require new commissions.

Pricing snapshot for 2026:

• $0: StreamElements, Streamlabs free themes, Nerd or Die free pack, OWN3D free tier, Canva, Figma, GIMP, Adobe Express, Stream Maker
• $5-30: single-theme pack from Nerd or Die, GETREKT, Hexeum, Kudos, OWN3D Shop, StreamSpell
• $14-27 per month: OWN3D Pro Stream Pass (€14) or Streamlabs Ultra ($27)
• $50-150: typical Fiverr commission for a full pack
• $150-800: full custom commission from a studio

Design from scratch in Canva, Figma, Photoshop or GIMP

In my Affiliate onboarding work, building the layout yourself is the only way to land a one-of-one channel without a commission. The work splits into four passes: set the canvas, lay out the elements, apply branding, export (this is the exact line I gave a creator last week). In my Affiliate onboarding work, none of it requires a design degree.

1. Set the canvas to 1920x1080

Real talk: every overlay tool wants the canvas at the streaming resolution. Per multiple 2026 sizing guides (TacticalLion, GetRektLabs, StreamSpell), 1920x1080 is the standard for 1080p streams. 2560x1440 or 3840x2160 are used for 1440p and 4K. The overlay file dimensions must match the canvas resolution in OBS, or the result will look pixelated when scaled Worked through this with a Variety streamer on Saturday..

2. Mark a 90 px safe zone

Honest take from the trenches: add a 90-pixel margin from every edge of the canvas. Twitch's mobile player crops the corners. Alerts placed flush with the edge will be cut off on phones, and small streamers see most of their first traffic on mobile. The same margin protects against viewers using a non-fullscreen window. Honest take from the trenches: only the full-width header banner ignores the margin. Honestly — those are typically 1920 px wide and 50-150 px tall.

3. Lay out the elements

Standard sizes for the building blocks: (confirmed in the Twitch Creator Camp doc on 2026-04-29)

• webcam frame: 1280x720 for a 16:9 cam, 800x600 for a 4:3 cam, scaled to fit a corner
• alert box: 800x600 or 800x500 (StreamElements default), centre or upper-left
• stream panels (offline channel page): 320x100 or 600x380
• full-screen scene (Starting, BRB, Ending): 1920x1080
• header strip: 1920x75 to 1920x150
• chat box: usually 360-480 px wide, 600-900 px tall

4. Honest take from the trenches: apply your three-colour palette

A creator I work with hit this last week — pick three to four colours and one to two fonts. Use a brand colour for accents (frame outline, chat name, alert highlight) and one neutral for backgrounds (transparent dark or a soft tint) — I have seen this stop a dozen channels from hitting Affiliate.. Honest take from the trenches: keep the same set on every scene, every alert, every panel.

5. Export with transparency

Static elements export as PNG with alpha; this is non-negotiable. The OBS forum and StreamElements documentation both flag the same beginner mistake: a JPEG export drops the transparency channel and shows up as a solid white or black box over the gameplay. WebM with VP9 codec is the format for animated transparent loops. A renamed MP4 will not work.

Photoshop and GIMP earn their keep at this stage — if you need pixel-level effects (worn metal, neon glow, hand-drawn lines). A creator I work with hit this last week — for the rest of the pack, Figma's component system and Canva's AI tools cover 90% of the work in a fraction of the time.

Animated overlays: WebM, Lottie and HTML5 browser sources

Three formats handle animation in OBS and Streamlabs. Each has a clear job; mixing them up is what causes most CPU spikes and missing-transparency reports.

1. WebM with alpha (the default)

Per the OBS forum and Hexeum's setup guide, WebM is the most commonly used format for animated overlays because file sizes are small, the codec carries an alpha channel, and CPU cost stays low. Add it to OBS as a Media Source, point at the file, enable Loop, and place it above the game capture. If the WebM shows a black or white background, the file was exported with a codec other than VP9; re-export from Photoshop, After Effects, or your animation tool with VP9 + alpha checked.

2. Lottie via browser source

Lottie ships animations as JSON files and renders them in any modern browser. For OBS, drop the JSON onto a hosted page, embed the dotLottie web component, and point the Browser Source at the URL. Per LottieFiles' own docs, the file size is a fraction of an equivalent video and it scales to any resolution without quality loss. It is the right pick for vector art, infinite loops, and on-action alerts triggered by JavaScript.

3. HTML5 + CSS browser source

Custom HTML pages are the back end of every Streamlabs and StreamElements widget. The Browser Source in OBS loads any URL and renders it transparently if the page sets `body { background: transparent; }`. This is how chat overlays, sub goal counters, and event lists work. For the streamer who can write HTML, this is the route to overlays nobody else has.

4. Anti-lag plan

Animation cost compounds. A scene with eight WebM loops, three browser sources, and a Game Capture pushes CPU even on modern hardware. Streamlabs Desktop uses 20-30% more CPU and RAM than OBS Studio, per multiple 2026 comparisons; on mid-range PCs that gap shows up as dropped frames. The fix is mostly addition by subtraction:

• cap animated loops at one or two on the main scene
• use 30 fps WebM, not 60 fps, for ambient loops nobody is watching closely
• tick `Shutdown source when not visible` on every browser source
• merge multiple PNG layers into a single flattened image when they never animate apart
• delete unused sources from the scene rather than hiding them

If alerts and chat overlap visually, fix it in the layer order before raising bitrate. Right-click the source > Order > Move to Top or Move to Bottom. The bug is almost always layer order, not export.

How to install your overlay in OBS Studio (browser source + PNG)

Two source types cover every overlay in OBS Studio: Image (for static PNGs and the channel logo) and Browser Source (for cloud overlays, alerts, chat and animated widgets). The walkthrough below uses the StreamElements pattern documented on its own help portal, but the exact same flow works with Streamlabs widget URLs.

Step 1. Create a scene

Open OBS Studio. In the Scenes panel, click the + button. Name the scene by content type (`Gameplay`, `Just Chatting`, `Starting Soon`, `BRB`, `Ending`) so the Stream Deck or hotkey list reads cleanly later.

Step 2. Add a static PNG element

In the Sources panel: + > Image. Click Browse, find the transparent PNG (webcam frame, logo, header), click OK. Right-click > Transform > Fit to Screen if it should fill the canvas, or drag the corners to position. The PNG must have its alpha channel intact; a JPEG version will sit over the gameplay as a solid rectangle.

Step 3. Add an animated WebM

Sources > + > Media Source. Browse to the.webm file. Tick Loop. Click OK. Place the source above the game capture and below the camera if it is a frame, or above everything if it is an alert.

Step 4. Add a Browser Source for cloud overlays

Open the StreamElements or Streamlabs editor in your browser. Find the overlay URL (the link icon top-right in StreamElements; the widget URL in Streamlabs Dashboard). Copy the URL. In OBS: Sources > + > Browser Source > Create New > paste the URL. Set Width 1920 and Height 1080 for full-canvas overlays, or smaller for individual widgets like a sub goal bar. Tick `Shutdown source when not visible` for any browser source not on the main scene to stop it from consuming CPU in the background.

Step 5. Order the layers

OBS draws sources from bottom to top. A working stack from bottom to top looks like:

• Game Capture or Display Capture (the bottom)
• Decorative background or scene art (PNG with transparency)
• Webcam (Video Capture Device)
• Webcam Frame PNG (sits around the cam)
• Alert browser source
• Sub goal browser source
• Chat box browser source

Flip the order and the gameplay covers the camera, or alerts hide behind the frame. Right-click any source > Order > Move Up / Move Down to fix it. If the alert never shows up, that is the cause 90% of the time.

Step 6. Repeat for every scene

Build a separate scene for each layout. OBS reuses sources across scenes when you choose `Add Existing` instead of `Create New`, which keeps the camera and frame consistent everywhere. A typical pack has four to five scenes; the Stream Deck or a hotkey set switches between them in one click.

Step 7. Stream Deck for one-button switching

An Elgato Stream Deck (or the open-source streamdeck-ui) maps each scene to a physical key. In the Stream Deck app, drag the OBS Studio `Scene` action onto a key, pick the target scene from the dropdown. Multi-Actions can fire several events at once: switch scene, trigger an alert, change BGM track, send a chat message, all on one press. Without it, scene switching is a hotkey or a mouse click into the OBS panel.

If you are still wiring up earlier parts of the pipeline, the [game capture setup guide](/blog/how-to-set-up-game-capture-in-obs-studio) and the [webcam setup guide](/blog/how-to-set-up-webcam-in-obs) cover the sources that sit underneath the overlay. For a full Streamlabs comparison, [Streamlabs vs OBS Studio in 2026](/blog/streamlabs-vs-obs) breaks the choice down.

Sub goal, alerts and chat widgets without breaking your stream

Three widgets carry most of the on-screen weight: a sub goal counter, alerts, and a chat box. Each one is a browser source with a URL pointing at a cloud editor (StreamElements, Streamlabs, Sound Alerts, GoalForgeX). The widget URL feeds OBS; visual changes happen on the cloud editor's website without restarting OBS.

1. Sub goal and follower goal

Streamlabs ships a Sub Goal widget under Sub Goal > +Add. The widget appears in OBS Sources, where you drag, resize, and position it like any other source. Alternatively, copy the Widget URL from the Streamlabs Dashboard and paste it into OBS as a Browser Source. Twitch's native sub goal pulls from the platform's API and adds zero lag.

2. Alerts (subscribe, donation, follow, raid)

Both StreamElements and Streamlabs ship alert browser sources. Cap the simultaneous alerts at one at a time; chained alerts hide each other. Keep alert duration to 4-7 seconds so they don't bury raid messages or chat moments.

3. Chat overlay (with 7TV, BTTV, FFZ)

On-screen chat lifts engagement on Just Chatting and IRL streams. StreamElements' chat overlay supports 7TV emotes natively; Streamlabs' chat overlay does not, per StreamEmote's 2026 third-party emote guide. Open-source ChatIS (jChat fork) is the most flexible option. It loads in any browser source and shows BTTV, FFZ and 7TV emotes alongside the standard set. The full setup steps live in our [how to show Twitch chat on stream](/blog/how-to-show-twitch-chat-on-stream) walkthrough.

4. Info panels (channel page, not stream)

Panels live below the player on the Twitch channel page, not over the live video. They share the same visual system as the on-stream overlay (same colours, same fonts, same shapes), and they are usually exported in the same Figma or Canva file. The full process and the exact panel sizes are covered in [how to edit Twitch info panels](/blog/how-to-edit-info-panels).

Each new widget URL adds one browser source. Six is comfortable; ten is the soft ceiling on most home PCs. Past ten, frame drops are common even on a Ryzen 7. The first thing to drop is always the chat box, since most viewers can read chat themselves under the player.

Testing and feedback before you go live

An overlay tested only at editing zoom looks different on a Twitch player at native size. A 30-second test recording catches everything: invisible text, alerts behind frames, mismatched scenes, audio bugs.

Run the test with OBS in Studio Mode (View > Studio Mode), then Start Recording, switch through every scene, trigger a test alert from the Streamlabs or StreamElements dashboard, watch the playback at 100%.

What the recording exposes:

• text readable at 1080p and at the small mobile-player size
• no element sitting over the game minimap or HUD
• alert audio level matched to the game audio (typically 60-70% of game volume)
• alert duration short enough to not bury chat
• Starting Soon and BRB scenes loop without a visible jump
• Stream Deck or hotkey switching responds in under one second

Send the recording to two regular viewers in DM, plus a moderator. Fresh eyes catch what the streamer's own habituation hides. Per the TacticalLion beginner guide, the most common feedback note is too much information on screen. Most overlays improve more from removing one element than from adding another.

Test on mobile network as well. Open Twitch on a phone over 4G; the bitrate drops, the player size shrinks, and overlays designed only on a 27-inch monitor often fail at 360-pixel-wide playback. If text is unreadable on mobile, raise the font size or the contrast before going live.

Change one element per session. Swapping the entire pack mid-week confuses returning viewers and erases the test data. Update the alert sound, then watch the next stream's chat reaction. Update the camera frame, then the next.

Keep the overlay fresh: small updates beat full redesigns

An overlay does not have to be redrawn from scratch to feel new. Small swaps every six months keep the channel current without resetting viewer recognition.

Workable update rhythm:

• light redesign once every 6-12 months: same palette, refreshed shapes
• seasonal scene packs around Halloween, the New Year and channel anniversaries
• one to two changed elements per session, never the whole pack at once
• rotating Starting Soon and BRB scenes (low-risk, high-impact)
• alert visual or sound updates tied to a milestone (100 followers, first sub)

Holiday packs are the safest test ground. Halloween and New Year overlays are expected to be temporary, so viewers do not anchor on them. If a new shape language works during a holiday push, fold parts of it into the permanent pack afterwards. If it does not, drop it in February with no cost.

Keep the source files. A Figma project, a Photoshop PSD, an After Effects file: these turn the next update from a $50 commission into a one-hour edit. Streamers who lose source files end up paying twice for the same work.

Pre-stream overlay checklist

Run this 60 seconds before you click Start Streaming. The list catches everything that breaks an overlay between editing and broadcasting:

• every scene loads on first switch (no missing source banners)
• PNG transparency intact (no white or black squares around frames)
• WebM loops without visible jumps at the seam
• browser sources loaded (sub goal counts the right number, chat box shows live messages)
• text readable at 100% canvas zoom, more than just at the editing zoom
• elements clear of the game minimap, HUD and any subtitle zone
• alert audio at 60-70% of game volume; duration 4-7 seconds
• Stream Deck or hotkeys map to the right scenes
• CPU and GPU use under 70% in OBS > Stats during a 1-minute gameplay test
• 30-second test recording reviewed at 100%

An overlay built right makes the room behind the streamer disappear. The viewer reads the camera, the game, the chat, and a few branded touches, not a wall of UI. Most of the work is restraint: fewer elements, larger fonts, cleaner layer order, calmer animation. The pack chosen on day one is less important than the discipline of testing before every session and updating one piece at a time.

Once the overlay is solid, the rest of the channel page deserves the same care. The [channel page setup guide](/blog/twitch-channel-page-setup), [info panels guide](/blog/how-to-edit-info-panels), and [chat overlay walkthrough](/blog/how-to-show-twitch-chat-on-stream) cover the surfaces that share the visual system. For green-screen work in front of the overlay, see the [chroma key setup in OBS](/blog/how-to-set-up-chroma-key-in-obs-studio). Streamers still picking software should start with [Streamlabs vs OBS Studio](/blog/streamlabs-vs-obs).

Stream overlay FAQ

How do I make a stream overlay for free?

Pick a free pack from StreamElements, Nerd or Die, OWN3D or Streamlabs, then load it into OBS. For a from-scratch design, open Canva or Figma at 1920x1080, lay out the camera frame, alerts and panels, and export each piece as a transparent PNG. The whole process takes one to three hours for a first-time builder.

What size should a stream overlay be?

1920x1080 pixels for 1080p streams, which is the industry default in 2026. Use 2560x1440 for 1440p or 3840x2160 for 4K streams, with the canvas matching your OBS output resolution. Keep a 90-pixel safe zone from each edge so mobile viewers don't lose corners. Webcam frames are typically 1280x720; stream panels run 320x100 or 600x380.

Is Streamlabs Ultra worth $27 a month for overlays?

Worth it for streamers who change themes every month or run multiple channels. Ultra gets 750+ themes plus multistreaming, watermark-free clips and the Intelligent Streaming Agent. For a single channel that picks one theme and sticks with it, a one-time $20-30 pack from Nerd or Die or GETREKT is cheaper. The annual price ($189) cuts the per-month rate to about $15.75.

How much does a custom stream overlay cost on Fiverr?

Fiverr's stream overlay category averages $50-60 per package and $70-80 for animated panels, per the platform's category prices. Entry-level gigs start around $5; full custom commissions from established studios run $150-800. Send the freelancer a colour palette, a font reference and three example streams you like, then order a small test gig before committing to a full pack.

Why is my stream overlay showing a white or black background?

The image was saved without an alpha channel. JPEGs have no transparency layer, so they render as a solid rectangle over the gameplay. Re-export the file as a PNG with transparency in Photoshop, GIMP, Canva or Figma. For animated overlays, the same fix applies: re-export the WebM with VP9 codec and the alpha channel ticked, since renamed MP4 files do not carry alpha.

What is the difference between StreamElements and Streamlabs overlays?

StreamElements is cloud-based: every widget feeds through one browser source URL, server-side processing keeps local CPU low, and the chat overlay supports 7TV emotes natively. Streamlabs Desktop bundles widgets into one app for a smoother first-time setup, but uses 20-30% more CPU than OBS and gates premium themes behind Ultra. StreamElements wins on free overlays and CPU footprint; Streamlabs wins on first-day install speed.

Can I use Lottie or HTML5 animations as a stream overlay?

Yes. Add the Lottie JSON or HTML page as a Browser Source in OBS, set the URL, and tick `Shutdown source when not visible`. Lottie file sizes are small and scale to any resolution without quality loss. HTML5 with CSS `background: transparent;` is the back end of every Streamlabs and StreamElements widget, and the right format for streamers who can write a few lines of HTML.

Do I need a separate overlay for Kick or YouTube?

No. The same 1920x1080 PNG and WebM files load on Twitch, Kick and YouTube. OBS does not care which platform receives the stream. The only platform-specific work happens in the channel page graphics (banners, panels) and in the chat widget URL, which has to point at the right service. A single Figma file usually exports all three platform sets in an afternoon.

Registration