iMessage Chat Generator (Fake)
Build a fake iMessage conversation and download it as a shareable image.
About the iMessage Chat Generator
Add messages one at a time, pick whether each line came from you or them, and the bubble layout updates instantly, complete with grouped timestamps like a real iOS thread. It's built for mockups and memes, not for faking anyone's actual messages, and the finished image downloads as a PNG straight from your browser.
How timestamps get grouped instead of repeating on every bubble
A timestamp label only appears in the output when a message's time differs from the message directly before it, tracked by comparing against the last time value the renderer saw as it works down the message list. That's exactly how real iOS Messages behaves, several consecutive messages sent close together share one timestamp shown once above the group, rather than every individual bubble carrying its own repeated time label. Setting two consecutive messages to the identical time string here reproduces that same grouped look automatically.
The CSS trick behind the bubble "tail" shape
Real iMessage bubbles aren't perfectly rounded rectangles, the corner nearest the sender's avatar has a subtly tighter radius that reads as a small tail pointing toward them. This tool reproduces that with pure CSS rather than an image or SVG shape: a "them" bubble gets its bottom-left corner radius reduced to 4px while its other three corners stay fully rounded at 18px, and a "me" bubble mirrors that same reduction on the bottom-right corner instead, matching which side of the screen each bubble appears on. That asymmetric corner-radius trick, four independently different border-radius values on one element, is a lightweight, purely CSS way to fake the tail effect without needing any additional graphic.
Why the "me" bubble uses a gradient instead of one flat blue
The sent-message bubble background isn't a single solid blue, it's a top-to-bottom linear gradient from a slightly lighter blue (#0B93F6) into Apple's standard iMessage blue (#007AFF). That subtle gradient mirrors Apple's own actual bubble styling, a detail most people wouldn't consciously notice at a glance but one that contributes meaningfully to the mockup reading as authentic rather than like a generic blue chat bubble. The "them" bubble stays a flat, ungraded light gray, also matching real iMessage's actual received-bubble styling.
Why message text uses pre-wrap instead of normal white-space handling
The bubble text is rendered with white-space: pre-wrap, which preserves any line breaks you actually typed into a message while still allowing long single lines to wrap naturally within the bubble's width. That combination matches how a real messaging app's text input behaves, a multi-line message you compose keeps its intended line breaks in the final bubble rather than having them silently collapsed into one run-on line.
Because the export is a pixel-accurate image, labeling and intent matter
The download uses the same html2canvas-based rendering technique covered elsewhere on this site, producing an image that's visually indistinguishable from an actual device screenshot once exported. That realism is exactly the point for legitimate use, mockups, memes, presentation slides, app store preview images, but it's also why this tool and its output are clearly labeled "(Fake)" throughout, and why it should never be used to fabricate a conversation and present it as something someone genuinely said.
Why "Remove Last" only undoes one step at a time
Rather than offering a delete control on each individual bubble, this tool keeps things simple with one "Remove Last" button that pops the most recently added message off the end of the internal message list. That matches the most common real editing need, fixing a typo or reconsidering the last line you just added, without the added interface complexity of per-message delete buttons and confirmation prompts for a tool meant to stay quick and lightweight for a short mockup conversation.
Frequently Asked Questions
How does the tool decide when to show a new timestamp above a message?
A timestamp only appears when a message's time differs from the one directly before it in the list. This mirrors real iOS Messages, where several messages sent close together share one timestamp shown once rather than repeating it above every bubble.
How is the bubble "tail" shape created without an image?
Each bubble has one corner's radius reduced to 4px (bottom-left for received messages, bottom-right for sent ones) while the other three corners stay fully rounded. This asymmetric border-radius trick fakes the tail effect using pure CSS with no additional graphic needed.
Why does the blue "sent" bubble look slightly different from a flat blue color?
It uses a subtle top-to-bottom gradient between two close shades of blue, matching Apple's actual iMessage bubble styling rather than a single flat color. It's a small detail that contributes to the mockup looking authentic.
Will line breaks I type into a message be preserved in the final image?
Yes, the bubble text uses white-space: pre-wrap, which keeps any line breaks you typed intact while still wrapping long lines naturally, matching how a real messaging app's text field behaves.
Is this tool meant to fabricate real conversations?
No, it's built for mockups, memes, and presentation use, and is clearly labeled "(Fake)" throughout. Because the exported image is visually indistinguishable from a real screenshot, it should never be used to present a fabricated conversation as something someone actually said.
Can I press Enter instead of clicking Add Message?
Yes, pressing Enter while typing in the message text field triggers the same action as clicking the Add Message button, matching how most real chat apps let you send a message without reaching for the mouse.