Video Safe Zone Overlay Generator

Get exact pixel margins for TikTok, Instagram Reels and YouTube Shorts UI overlays on a 1080×1920 video.

Diagram is proportional, not to exact scale. Solid outer border = full video canvas; dashed blue box = safe zone boundary, clear of platform UI overlays.

900×1400 px safe area

Top 260 px, bottom 260 px, left 90 px, right 90 px margin.

Safe-zone insets
EdgeInset
Top260 px
Bottom (universal fallback)260 px
Left90 px
Right (universal fallback)90 px
Result: safe area 900 by 1400 pixels

Embed Video Safe Zone Overlay Generator

Paste this into your page's HTML. The calculator runs inside the frame, and a small link back to ToolsNode stays at the bottom.

Why every safe-zone guide is a reverse-engineering exercise

TikTok, Instagram and YouTube treat the exact pixel layout of their own app interface as free to change with any update — none of them publish an official safe-zone specification for creators to design against. Every figure in this tool, and every competing safe-zone guide you'll find, comes from someone actually measuring what's currently visible in the app: where the caption block sits, how far the interaction icons intrude from the right edge, how much the bottom UI eats into the frame. Treat these as a strong, current best estimate, not an eternal guarantee.

Designing once for all three platforms

If the same vertical video is going out to TikTok, Reels and Shorts simultaneously — increasingly the default workflow — the safest approach is designing to the intersection of all three platforms' safe zones rather than picking one and hoping the others are forgiving. That means accepting a somewhat smaller usable frame than optimizing for a single platform, in exchange for not having your call-to-action or your face clipped by whichever platform turns out to have the least generous margin.

What this doesn't cover

Persistent app UI is one thing; optional overlays are another. Auto-generated captions, viewer-added stickers, polls and platform-served ads can all sit on top of your video unpredictably, and none of that is modeled here. If you're relying on burned-in captions being readable, give yourself extra margin beyond what the safe zone alone suggests.

How to use this generator

  1. Choose a platform (or Universal for all three).
  2. Enter your canvas resolution.
  3. See the exact pixel margins and safe-zone rectangle.
Not an official platform spec
TikTok, Instagram and YouTube don't publish pixel-exact UI overlay specs — every figure here (this tool's included) is reverse-engineered from what's visible in each app, and can shift when an app updates its UI.
Scales with canvas size
All figures are defined at the standard 1080×1920 canvas and scaled proportionally for any other resolution you enter, since every platform still targets a 9:16 frame.

Questions

Why doesn't TikTok publish an official safe zone spec?

No major short-video platform does — TikTok, Instagram and YouTube all treat their in-app UI layout as an implementation detail that can change with any app update, not a public contract for creators. Every safe-zone guide, including this one, is reverse-engineered from what's currently visible in the app, which is exactly why these figures should be treated as a strong starting point rather than a permanent guarantee.

Which platform's safe zone should I design for if my video goes on all three?

Use the "Universal" option — it takes the more conservative margin on every edge across TikTok, Reels and Shorts, so critical content (captions, faces, CTAs) stays clear of any of the three platforms' UI, at the cost of a somewhat smaller usable frame than optimizing for just one.

My video isn't exactly 1080×1920 — do these margins still apply?

Yes, proportionally — every figure here is scaled from the 1080×1920 reference frame to whatever resolution you enter, since all three platforms target the same 9:16 aspect ratio regardless of the exact pixel count you export at.

Does this account for the platform's own captions (auto-generated subtitles), not just app UI?

No — this only covers each platform's persistent interface chrome (interaction icons, caption/attribution blocks, navigation elements), not optional overlays like auto-captions, polls, or stickers a viewer or the algorithm might add on top. Leave extra margin if you're relying on auto-captions being legible.

Sources