Where does Twitch put UI over the player?

On the live player Twitch overlays playback controls along the bottom, the streamer info and category along the lower-left, and the chat column on the right of the page. Keep critical overlay content out of those bands.

What is the safe zone for a Twitch Story?

Vertical Twitch Stories reserve the top for the profile chip and close button and the bottom roughly a quarter of the frame for reactions and actions. Keep text and faces in the central column.

Does Twitch chat cover the stream?

On the channel page chat sits in its own column beside the player, but theatre and full-screen modes can overlay controls on the video. Designing your overlay inside the safe area keeps it readable in every mode.

What resolution should I design my overlay at?

Design overlays on a 1920x1080 16:9 canvas to match the desktop player. The tool shows the safe-area pixel dimensions inside that frame for each surface.

Why do clip captions matter for safe zones?

Auto-generated clip and Story captions render near the lower third. Keeping your subjects and key text above that band stops captions from overlapping faces or important visuals.

Twitch Safe Zone Guide

Email me this result

Get this tool's output sent to your inbox, plus one useful tool a week. No spam, unsubscribe any time.

This guide simulates where Twitch overlays its own UI so you can keep your webcam, alerts and key visuals out of the dead zones. Twitch chrome differs sharply between the wide 16:9 live player and vertical Stories, so the tool switches the reserved bands per surface and shows the resulting safe-area dimensions.

How it works

Each surface defines the fraction of the frame Twitch reserves at the top, bottom and sides for its interface — playback controls, the category and info bar, chat, or Story reaction buttons. The tool draws those reserved bands in red over a scaled preview of the canvas and outlines the remaining green safe zone in the centre.

It then reports the exact pixel dimensions: the full frame, the reserved pixels on each edge, and the resulting safe-area width and height. Live-player surfaces use a 1920×1080 canvas; vertical surfaces use the 1080×1920 Story frame.

Tips

Anchor your webcam and recurring overlays inside the green box — anything in the red bands risks being covered in theatre or full-screen mode.
For Stories, keep faces and headlines in the central column away from the top profile chip and bottom action bar.
Re-check your layout after Twitch UI updates; this tool reflects current reserved regions but the player chrome does shift over time.