Twitch overlaysBrowse✎ EditorOVERLAY PREVIEW

YOUR NEXT STREAM STARTS HERE

Twitch overlays

Pick an overlay. Preview it. Change the colours, add your name, then copy it into StreamElements.

DEMO
Sample stream · 1080p
Y

English Overlay demo

✎ Open in editorHTML, CSS, JS + Fields (your settings)

Customise

Every setting here is also in the StreamElements Fields panel after you paste the 4th box, so you can change it later without code.

Your details

Background & game window The background fills the screen except the game window and webcam, which stay see-through (the grid).

Best size: 1920 × 1080 PNG or JPG. This image is only for the preview here. It is never uploaded or put into your code. In StreamElements, upload it in the widget settings under “Background & game window”.

Game window:

Colours Tap a circle to open the colour wheel, or type a hex code.

About Your cool name

See how this overlay sits inside a stream. The middle of the screen and the webcam hole are see-through. The grid shows what is see-through. Press ▦ on the player to switch to a sample game.

✦ Free to copy▣ StreamElements◐ Colour wheel + hex▭ Background image⧉ Your name included

This is an independent preview gallery, not Twitch. Chat, audience activity and stream content shown here are demonstrations.

Use this overlay

In StreamElements, add a Custom Widget to a 1920 × 1080 overlay. Open its code editor and replace each tab (HTML, CSS, JS and FIELDS) with the matching box below. Set the widget to 1920 × 1080 at X=0, Y=0, then save.

Overlay setup instructions