How to create an Instagram DM mockup in four steps
- Set the account. Put the username in Contact → Name — it sits in the header beside the avatar, exactly as Instagram prints a handle. Upload a picture, or keep the Instagram-coloured gradient initial circle ChatMock draws by default.
- Write the DMs. + Alex and + Me add messages and the sender toggle swaps sides. Instagram stacks a run of messages from one person without narrowing the corners, so the capsules simply repeat at a steady width. Images render as rounded media bubbles with an optional caption.
- Set the Seen marker. Under Contact → Delivery the label defaults to
Seen, and it draws under your last outgoing message next to a miniature of the recipient's avatar. Empty the field and the thread reads as one they have not opened. - Export. Pick a multiplier first: 2x suits the tall, portrait framing Instagram itself uses, 1x is enough for a quick draft and 3x covers anything that will be blown up or printed. Leave Phone frame off for an ordinary screenshot, and switch it on when the DM has to sit inside a phone for a Story graphic or a slide.
What makes an Instagram DM screenshot actually look real
Instagram DMs are visually simple and unusually easy to get subtly wrong. Here are the values ChatMock uses, taken from the real app:
| Element | Light mode | Dark mode |
|---|---|---|
| Chat background | #ffffff | #000000 |
| Outgoing bubble | Gradient #a033ff → #e24aa2 — not a flat colour | |
| Incoming bubble | #efefef | #262626 |
| Bubble shape | 18px capsules, no tails, no corner narrowing between grouped messages | |
| Seen indicator | Mini avatar + label under the last outgoing message only | |
| Timestamps | Occasional centred markers between groups, never per bubble | |
Two details carry the realism. First, the gradient: outgoing bubbles fade from purple into pink, and that gradient survives in both light and dark mode — a flat blue sender bubble reads as Messenger, not Instagram. Second, the Seen indicator is an avatar, not text alone: a tiny round photo of the recipient appears next to the label under your last message. Text-only Seen lines are the most common tell in fake Instagram screenshots.
Everything you can customise
- Username and avatar photo (header and Seen indicator)
- Light or dark mode, both matching the real app
- Unlimited messages, reorderable, either side
- Seen label text — or remove it entirely
- Image attachments with captions
- Group time marker text
- Status bar: clock, battery and signal
- Optional iPhone-style phone frame
What people use Instagram DM mockups for
Instagram threads dominate creator-adjacent video: brand-deal sketches, “DMing my favourite artist” formats, UGC course material showing how a collaboration request reads, and fiction that plays out over a creator's inbox. The audience knows the interface intimately, which cuts both ways — the screenshot reads instantly, and small errors read just as fast.
Intent, not the image itself, decides whether a DM mockup is harmless. Parody, illustration, teaching and design work are all welcome; a fabricated exchange used to deceive, to harass someone, to impersonate a creator or a brand, or to invent evidence is not. This site carries no templates for bank, government, medical or legal notices — the Acceptable Use Policy explains the boundary.
Your handle never touches a server
The username, the avatar and the whole DM thread stay inside the browser: the layout is drawn with plain HTML and CSS and the PNG is generated on your own device. Turn off your connection once the page has loaded and the editor carries on — proof that no handle, message or photo was posted anywhere.
Other generators
ChatMock covers the platforms people actually search for, one at a time: the WhatsApp chat generator, the iPhone text message generator, the group chat generator, the Messenger chat generator, the Discord chat generator and the Telegram chat generator are all live. Two worth a look from here: the Discord page, where messages have no bubbles at all, and the Telegram page, where the checkmarks come in only two states.
For a deeper walkthrough of the details above, read the full Instagram DM screenshot guide on the blog.
Frequently asked questions
Is the Instagram DM generator free?
It is. There is no signup, no email step, no limit on how many DMs you mock up and no watermark on the export — gradient bubbles, the Seen marker and dark mode are all included at no cost.
Why is the sender's bubble a gradient?
Because Instagram draws your own messages that way. Since the platform unified its chat themes, outgoing DMs fade from purple to pink instead of using a flat colour, and a plain blue or grey sender bubble reads as some other app entirely.
What does the Seen marker look like?
Under your last outgoing message Instagram places a tiny copy of the recipient's avatar beside the word Seen. This editor reproduces exactly that — a small round photo plus the label — and the label text can be edited or cleared if your scene needs a different state.
Why is there no timestamp beside each DM?
Instagram does not label individual messages. Time markers appear now and then between groups of messages as small centred grey text. Stamping a time onto every bubble is the quickest way to make a DM screenshot read as fake.
Does the gradient survive dark mode?
Yes — the purple-to-pink fade stays in both light and dark themes, which is a detail generators that merely invert their palette miss. It is also the clearest way to tell an Instagram DM apart from a Messenger thread at a glance.
Does the text of my DM get uploaded anywhere?
Nowhere. The mockup is drawn in your browser and the PNG is encoded on your own device before it reaches your downloads. Usernames, messages and any image you add stay local, so switching off your wifi after the page opens changes nothing.
How should the username render?
As a handle in the header, sitting next to the avatar the way Instagram shows an account. Type the name without the @ if you prefer, upload a picture, or let ChatMock fall back to a gradient initial circle like the default avatar.
Am I allowed to use DM mockups commercially?
For legitimate creative work — videos, thumbnails, presentations, teaching, fiction, design — yes. Deceiving someone, impersonating a creator or a brand, or fabricating evidence is not acceptable, and the Acceptable Use Policy sets out that line.