How to create a Snapchat chat mockup in four steps
- Set the contact. Type the name into Contact → Name and it lands in the black-on-yellow header. Upload an avatar, or take the yellow initial circle ChatMock draws as a stand-in for a Bitmoji.
- Write the messages. Add lines with + Emma or + Me, swap the side with the sender toggle and reorder with the arrows. Snapchat gives each incoming message its own small avatar rather than grouping them, so the left side stays busy; a photo becomes a rounded media bubble with a caption.
- Set the Delivered label. Contact → Delivery seeds the field with
Delivered, which prints as small grey text beneath your outgoing lines. Replace it or clear it whenever the scene calls for a different state. - Export. Snapchat mockups live in vertical feeds, so 2x is the natural pick for a Story, a Reel cover or a TikTok frame; 1x is fine for a rough layout and 3x only really matters for print. The export is a bare rectangle until you enable Phone frame, which adds the handset outline for thumbnail-style compositions.
What makes a Snapchat screenshot actually look real
Snapchat is the platform generators get wrong most often, because its colour logic is backwards from what people assume. Here are the values ChatMock uses, taken from the real app:
| Element | Light mode | Dark mode |
|---|---|---|
| Header bar | #fffc00 — yellow, with black text and icons, in both modes | |
| Chat area | #ffffff — white, not yellow | #000000 |
| Outgoing bubble | Lavender #d9a7f9 | Deep purple #5b3a8e |
| Incoming bubble | #f0f0f0 | #262626 |
| Delivered label | Small grey text under outgoing messages | |
| Timestamps | Never inside bubbles | |
The single biggest tell in fake Snapchat screenshots is an all-yellow screen. Real Snapchat chats have a yellow header over a white (or black) conversation area, and generators that fill the whole screen with #fffc00 are instantly recognisable. The second tell is the outgoing bubble colour: it is lavender, not yellow, not blue, and not grey. And third, the Delivered label sits under outgoing messages as plain grey text — a detail most generators omit entirely.
Everything you can customise
- Contact name (in the yellow header) and avatar photo
- Light or dark mode, both matching the real app
- Unlimited messages, reorderable, either side
- Delivered label text — or remove it entirely
- Image attachments with captions
- Date marker at the top of the thread
- Status bar: clock, battery and signal
- Optional iPhone-style phone frame
What people use Snapchat mockups for
Snapchat conversations show up constantly in storytime videos, teen-drama sketches, and social media safety tutorials — the platform's ephemerality makes “here is what the message said” the natural visual device. Teachers and awareness campaigns use it for the same reason. Because the interface is so colour-distinct, audiences recognise it at thumbnail size, which is also why the yellow/white split matters: getting it wrong undermines the whole frame.
As on every page here, the deciding factor is intent. Snaps and chats composed to illustrate, to parody, to teach or to design something are perfectly fine; a made-up conversation turned loose to deceive someone, to harass them, to impersonate a person, or to forge evidence is not. There are no bank, government, medical or legal templates on ChatMock, and the Acceptable Use Policy covers the boundary in full.
Composed locally, never uploaded
The conversation, the yellow header and the Delivered label are all drawn by your browser with plain HTML and CSS, and the PNG is encoded locally before it is saved. Nothing is stored or transmitted, so once the page is loaded you can disconnect and keep building mockups offline.
Other generators
Snapchat is the most colour-specific platform here, so it pays to compare it with the others: the Instagram DM generator is the closest cousin, using its own purple-to-pink gradient instead of lavender, while the iPhone text message generator covers the plain iMessage look. Both are live, and so is the rest of the ChatMock set — the examples gallery is the fastest way to see them side by side.
Frequently asked questions
Is the whole Snapchat screen yellow?
No — and that misconception is the most frequent error in fake Snapchat shots. The signature yellow (#fffc00) fills the header and the app's main screens, but the conversation itself is white in light mode and black in dark mode, and this page keeps that split correct.
Why does Delivered appear under my messages?
Snapchat puts a small grey Delivered note below outgoing messages once they reach the other device — it is part of the interface rather than something extra. The editor lets you edit that label, drop it, or change it for a particular scene.
If it is not yellow, what colour is my bubble?
Lavender, #d9a7f9, on the light theme and a deep purple in dark mode — the sender bubble is deliberately neither yellow nor blue. Getting this wrong is the second-most common Snapchat mistake after the all-yellow screen.
Why is the header yellow but the icons black?
Because Snapchat keeps a bright #fffc00 header with black text and icons in both light and dark mode. The contrast is part of the look, and a mockup that swaps it for white icons on yellow no longer reads as Snapchat.
Can I drop a photo into the conversation?
Yes. Any message can hold an image with a caption, read locally from your device and drawn as a rounded media bubble — no uploading to a third-party host and nothing leaving your browser.
Is the Snapchat chat generator free?
Every part of it is. No account, no email gate, no daily limit and no watermark on the output, and the PNG is downloadable at 1x, 2x or 3x.
Does a Snapchat mockup get sent to a server?
Not at all. The whole conversation is rendered in your browser and the PNG is generated on your own device before being saved to your downloads. Names, messages and images stay put, so you can disconnect from the internet after the page loads and keep working.
Can I use the mockups in commercial work?
For legitimate purposes — videos, thumbnails, presentations, teaching, fiction, design — yes. What you cannot do is pass a fabricated conversation off as real, harass or impersonate someone, or fake evidence; the Acceptable Use Policy explains where the line sits.