Instagram Story Mockup

Build a 9:16 story screenshot. Everything stays in your browser.

Profile

Username

Profile picture

Click the circle to upload a photo. Without one, the story shows the username's initials.

Time ago

Background

Background image

Click or drag a photo here

The photo fills the whole story and is cropped to 9:16 from its centre.

Colour or gradient

Custom

Story segments

Segments

Active segment

Text overlays

Text 1

Text colour

Size

Position

2 of 3 overlays left.

Reply bar

Reply placeholder

Live preview

9:16 · PNG at 2× size

studio.lumen3h

New drop Friday

Send message

Image includes FindUtils.com watermark

How to Make an Instagram Story Mockup

Set the profile

Type a username, click the circle to add a profile picture (or leave it for initials), and switch on the verified badge or the green Close friends ring if the story needs them. Edit the time text, for example 3h or 12m.
Choose the background

Drop a photo into the Background image box; it fills the story and is cropped to 9:16 from the centre. With no photo, pick one of the gradients or colours, or set a custom colour.
Add captions and segments

Write up to three text overlays and give each a colour, a size, a position (top, middle or bottom) and a background pill. Set how many segments the progress bar has and which one is playing.
Download the PNG

Check the live preview, change the reply bar text or hide it, then click Download Image. The PNG is saved at twice the preview's size and carries a FindUtils.com watermark.

Popular Use Cases

Campaign pitches

Show a client a story sequence before launch: one mockup per segment, with the progress bar showing which frame of the sequence they are looking at.

Content calendars

Drop story drafts into a planning document so the team can approve the copy, the caption placement and the background before anything is posted.

Design and UX work

Put a vertical story frame into a case study, a landing page or a prototype to show how a product or a photo looks in a story layout.

Teaching social media

Make example stories for a course or a workshop: where captions sit, how a pill keeps text readable, and what a Close friends story looks like.

Why use our Instagram Story Mockup?

Show what a story will look like before it is posted, without opening the app or touching a live account. Set the username, profile picture, verified badge and time, put up to three captions over a photo or a gradient, choose how many story segments the progress bar shows, and download a PNG for a pitch deck, a content calendar or a lesson.

The Instagram Story Mockup builds a still, vertical 9:16 story screenshot in your browser. The preview draws the segmented progress bar (1 to 5 segments, with earlier ones full, the active one part-played and later ones empty), the profile picture inside a pink-to-orange ring or a green Close friends ring, the username, an optional blue verified badge drawn as a plain circle with a check, the time, the three-dot menu and the close button. Up to three text overlays sit at the top, middle or bottom, each with its own colour, size and optional background pill, and the bottom bar shows a message field with heart and share icons.

The background is your own photo, cropped to fill the frame, or one of six gradients and colours, or a custom colour. Photos are read on your device and never uploaded. The PNG is saved at twice the preview's size and always carries a FindUtils.com watermark, because a picture that looks like a real story should say that it is not one.

It makes one still image. It does not make Reels, video, stickers, polls, music or link stickers. For square feed posts use the Instagram Post Generator; to resize a real image for a story use the Social Media Image Resizer.

How it compares

Editing a real story screenshot in an image editor means repainting the progress bar, retyping the name and matching the header by hand for every change. Here each part is a control: change the segment count or the caption and the preview redraws at once. Nothing needs an account or an upload, and there is no download limit.

What it does not do: it draws neutral shapes rather than the app's own artwork and uses your system font rather than the app's typeface, so the result is close to a story rather than identical to one, and the watermark stays on every image.

Tips for Better Story Mockups

Keep captions short. A story is read in a few seconds, and two or three words at size L read best.
Use a background pill, or leave it off and let the automatic shadow carry light text over a busy photo.
Put captions at the top or middle; the bottom zone sits just above the reply bar.
Use a tall photo. A wide one is cropped hard at the sides to fill the 9:16 frame.
For a sequence, download one image per segment and move the active segment forward each time.
Line breaks you type in a caption are kept in the image.

Frequently Asked Questions

Is this tool affiliated with Instagram?

No. FindUtils is not affiliated with or endorsed by Instagram or its owner; Instagram is a trademark of its owner. The mockup draws no logo, wordmark or app artwork: the verified badge is a plain blue circle with a check, and the icons are generic shapes.

Can I remove the watermark?

No. Every PNG carries a FindUtils.com watermark and there is no setting to turn it off. A screenshot that looks like a real story should say that it is not one, so the mark cannot be removed.

Are my photos uploaded anywhere?

No. The profile picture and the background photo are read in your browser and the PNG is made on your device. Nothing is sent to a server.

What does this tool not do?

It makes one still PNG. It does not make Reels or video, and it has no stickers, polls, questions, music, links, mentions, GIFs or drawing tools. It does not post anything and it does not connect to any account.

How do I make a feed post mockup instead of a story?

Feed posts are made with the Instagram Post Generator, which draws a square post with the caption, likes and comments under it. This tool only makes the vertical 9:16 story.

What size is the downloaded image?

The PNG is 9:16 and saved at twice the preview's size. On a desktop screen the preview is 360 pixels wide, so the image is 720 × 1280 pixels; on a narrower phone screen it is smaller. It is not the 1080 × 1920 size a story is uploaded at.

What do the segments and the Close friends ring do?

Segments set how many bars the progress line at the top has, from 1 to 5, and Active segment picks the one that is playing: bars before it draw full, it draws part-filled, and bars after it stay empty. The Close friends switch turns the ring around the profile picture green and adds a small Close friends label next to the name.

Why does my caption get a shadow when the pill is off?

So it stays readable. White text on a white or pale photo would disappear, so without the pill the caption gets a soft dark shadow (or a light one behind dark text). With the pill on, the pill takes the contrasting colour: white behind dark text, dark behind light text.

Can I use the mockups commercially?

Yes, in presentations, pitches, marketing material and lessons, with the watermark left visible. Using the tool grants no rights to any platform's trademarks.

Instagram Story Mockup