What this tool is for

Instagram's Story canvas is 1080×1920, but the platform overlays its own UI on top of every Story you post. The username and close button cover the top 155 pixels; the reply bar covers the bottom 155 pixels. Anything you place inside those bands gets obscured on the device. This tool overlays those exact bands on your image so you can verify your design before posting, and download a 1080×1920 PNG or a transparent overlay you can drop into Figma, Canva, or Photoshop.

Exact specs

Story canvas1080 × 1920 px
Aspect ratio9 : 16
Top UI band (Stories)155 px
Bottom UI band (Stories)155 px
Safe area (Stories)1080 × 1610 px
Top UI band (Reels)~250 px
Bottom UI band (Reels)~350 px
Right action column (Reels)~120 px
Max file size30 MB
Supported formatsJPG, PNG, WebP

How to use it

  1. Drop your design (any aspect ratio — it gets cover-fit to 9:16).
  2. Toggle between Stories and Reels to see how the same design performs under each format's UI bands.
  3. Drag inside the preview to reposition the focal point until your headline lands inside the green safe area.
  4. Toggle the danger zones, safe-area outline, and rule-of-thirds grid to taste.
  5. Download a composed PNG (overlay burned in for review), a clean 1080×1920 PNG (ready to post), or a transparent overlay PNG (a guide layer for Figma/Canva/Photoshop).

Before-you-post checklist

  • Headline sits entirely inside the green safe area, not touching the top or bottom band.
  • CTA button is at least 220px above the bottom edge so it survives Reels too.
  • Faces and product hero shots avoid the top 155px so the username does not cut across them.
  • Contrast holds against Instagram's white UI elements at the top.
  • Verified on a real phone — desktop browser previews can be misleading.

Need raw spec numbers and an auto-resizer instead of an overlay checker? Instagram Story Size guide. Designing a multi-slide post? Instagram Carousel Size tool.

Carousel MakerFrom the makers of this tool

Build the Story, not just the safe zone

This tool verifies your design fits Instagram's UI. Carousel Maker builds the design itself — AI-generated layouts, professional templates, and a drag-and-drop editor that exports to 1080×1920 in one click.

Open Carousel Maker

FAQ

What is the Instagram Story safe zone?+
A 1080×1610 rectangle in the center of the 1080×1920 Story canvas. Instagram covers the top 155px (username, close button) and bottom 155px (reply bar) with its UI, so any text or CTA outside that center band gets obscured.
Are the 155px numbers exact?+
They are the practical, observed values that have held across Instagram UI revisions for the last several years. Meta does not publish an official spec, and the band shifts a few pixels when new features ship (link stickers, broadcast channels). Designing inside 155/155 stays safe through normal UI churn.
How are Reels different from Stories?+
Same 9:16 canvas, deeper UI bands. Reels reserve roughly 250px on top and 350px at the bottom for caption, audio attribution, and the action column on the right (~120px). Cross-posting to both? Design for Reels constraints.
Why does my design look fine in Figma but get cut on Instagram?+
Figma frames do not include Instagram's UI. The canvas is the full 1080×1920 in your design tool, but the visible safe area on the device is only 1080×1610. This tool overlays the actual UI bands so you can verify before posting.
Does this tool upload my image to a server?+
No. Everything runs in your browser via the canvas API. Your image is never sent to a server, stored, or logged.
What file formats and sizes are supported?+
JPG, PNG, and WebP up to 30MB. The tool always exports PNG at exactly 1080×1920.