Instagram DM Generator (Fake)

About the Instagram DM Generator

Set a username, add lines back and forth between you and them, and the layout mirrors Instagram's DM thread, right down to the gradient avatar bubble. It's a lightweight mockup tool for memes or design comps, no account needed, and the finished conversation exports as a PNG you can download directly.

The gradient avatar and bubble colors match Instagram's real palette

The circular avatar and every "me" bubble use the same 45-degree gradient — #833ab4 (purple) into #fd1d1d (red) into #fcb045 (orange) — that Instagram uses across its own branding, from the app icon to story rings. "Them" bubbles stay flat #EFEFEF gray with dark #262626 text, which is exactly how Instagram renders incoming messages. Each bubble also gets an asymmetric corner: 6px on the bottom-left for "them" and bottom-right for "me", instead of a uniform 20px radius. That single sharpened corner is the visual "tail" that makes a chat bubble read as pointing toward its sender, a detail borrowed directly from Instagram's own CSS.

No timestamps, read receipts, or typing indicators — intentionally

Unlike this site's iMessage Chat Generator, which groups messages under timestamps whenever the clock value changes, the DM generator renders a plain, timestamp-free thread. Real Instagram DMs also omit per-message timestamps in the default view (you have to tap a message to reveal one), so leaving them out here is actually more accurate to the native app than adding fake clock times would be. There's no "Seen" indicator, no typing bubble, and no double-tap heart reaction either — the tool sticks to the two things that matter for a believable screenshot: who sent it, and what it says.

Messages render with textContent, not innerHTML

Every bubble is built with document.createElement("div") and bubble.textContent = msg.text, never by injecting a string into innerHTML. That means typing HTML tags or a <script> tag into the message field just prints those literal characters on screen instead of being parsed as markup, so the tool can't be used to run arbitrary code through its own preview even though everything happens client-side with no server involved.

Sender toggle, Enter-to-send, and single-step undo

The Sender dropdown decides which side a new line lands on before it's added — there's no way to re-flip a message after the fact, so getting the "Them"/"Me" toggle right before hitting Add Message matters. Pressing Enter in the message field triggers the same click handler as the Add Message button, which speeds up building a long back-and-forth. "Remove Last" is a plain array.pop() on the message list, so it only ever undoes the single most recent line — there's no way to delete a message from the middle of the conversation without removing everything added after it too.

Exporting a retina-sharp PNG with html2canvas

Downloading calls html2canvas() against the whole phone-frame preview with scale: 2, which renders the canvas at twice the on-screen pixel density before converting it to a PNG data URL. That's what keeps the gradient and text edges crisp instead of blurry when the image gets shared or zoomed into on another device. The backgroundColor: null option keeps the capture transparent outside the rounded frame rather than boxing it in a white rectangle, so the exported PNG's corners stay rounded when dropped onto a colored background.

Why this stays labeled "(Fake)"

Because the export is a pixel-accurate image and not a real screenshot from the Instagram app, there's no technical way to tell it apart from a genuine conversation once it's been downloaded and shared. That's exactly why the tool is named and framed as a mockup generator rather than left ambiguous — it's built for memes, UI mockups, and design comps, not for fabricating evidence of a conversation that never happened.