Apple Messages mockups, blue bubbles and green bubbles
The blue vs. green bubble debate is one of the most recognizable things in mobile messaging. This tool generates iMessage conversation screenshots with both, blue for iMessage (Apple-to-Apple) and green for SMS (Apple-to-Android). You pick which type each sent message uses, add timestamps, toggle delivered/read receipts, and even add tapback reactions like the thumbs up, heart, and ha ha.
It all renders in your browser on a canvas element. Download the PNG and use it wherever you need.
Getting the details right
Apple’s Messages app has a very specific visual language. Sent messages are rounded bubbles on the right, blue (#007AFF) for iMessage, green (#34C759 with a slightly darker tint) for SMS. Received messages are light gray on the left. The font is clean and medium-weight. Timestamps appear as centered dividers between message groups. Read receipts show as small gray text below the last sent message.
Tapback reactions are those small icons that float above a message bubble, heart, thumbs up, thumbs down, ha ha, exclamation marks, and question marks. They’re a distinctly Apple feature, and including them makes the mockup immediately identifiable as iMessage.
Where these get used
Film and TV production is actually a huge one. Whenever you see a text conversation on screen in a movie or show, someone had to mock that up. This tool makes it trivial.
App marketers comparing messaging platforms often need side-by-side screenshots. Having an iMessage mockup next to WhatsApp or Telegram demonstrates UI differences clearly.
Blog writers covering Apple ecosystem topics, messaging app comparisons, or iOS tutorials need these screenshots regularly. Generating them is faster and cleaner than trying to screenshot your actual phone.
Social media content: the blue bubble / green bubble dynamic is genuinely funny to people. Creators build comedy skits and memes around it, and having a mockup tool means you don’t need two phones.
Step by step
Type the contact name. Add messages one at a time. For sent messages, choose between iMessage (blue) or SMS (green). Received messages are always gray. Set timestamps where you want date separators. Toggle the read receipt on or off. Add tapback reactions to specific messages if you want that extra touch.
The live preview shows exactly what your PNG will look like. Adjust anything you don’t like, then download.
FAQ
What’s the difference between blue and green in the mockup?
Blue bubbles represent iMessage (encrypted, Apple-to-Apple). Green bubbles represent SMS/MMS (standard text messages, typically Apple-to-Android). In the tool, you choose which type each sent message uses.
Can I mix blue and green in the same conversation?
Yep. Real iMessage conversations can switch between iMessage and SMS if the connection drops or if the recipient’s iMessage is temporarily unavailable. The tool lets you set each sent message independently.
Do the tapback reactions look authentic?
They use the same icon style and positioning as Apple’s, a small circular badge that overlaps the top corner of the message bubble. The six options (heart, thumbs up, thumbs down, ha ha, exclamation, question) match what’s available in the real app.
Can I make group chats?
This version supports one-on-one conversations. Group iMessage chats with multiple participants have a different layout with sender names above each received bubble, that’s a potential future addition.
What about the time in the status bar?
The mockup focuses on the conversation itself, the header and message area. It doesn’t include an iOS status bar since those vary by device model and settings.