Chat UI

Chat Bubble Generator

Text bubbles that look like iMessage, WhatsApp, and Messenger. Build fake conversations, UI mockups, and chat-style memes — all in your browser.

Looks like a real screenshot.
That is the point.
iMessage WhatsApp Messenger

Upload a screenshot, or mock up a conversation first

The default preview shows a two-message exchange so the chat layout is obvious before you add your own image.

Text
Custom Colors
Bubble Style
Tail Direction
Appearance

Tap a bubble to drag. Drag the bottom-right handle to resize.

Chat bubble style preview — pill-shaped messaging bubble with iMessage-style curved tail, mimics WhatsApp, Messenger, and iMessage conversation UI

What People Build with Chat Bubbles

Fake Text Conversations

The "texts from my ex" and "AI conversation" meme formats. Alternate left-tail and right-tail bubbles to simulate a two-person chat. Customize colors to match iMessage (blue/green) or WhatsApp (teal/white).

UI Mockups & Design Demos

Need chat screenshots for a pitch deck, wireframe, or portfolio? Create clean conversation layouts and export as PNG. Import directly into Figma, Canva, Keynote, or PowerPoint.

Social Media & Memes

Overlay chat bubbles on photos for "conversation over image" formats. Popular on Instagram Stories, TikTok, and Twitter. For the viral speech bubbling format, try the Reddit meme maker.

Match Your Favorite Messaging App

Use Custom Colors in the editor to match these popular styles:

iMessage

Blue (#007AFF) for iMessage sent, green (#34C759) for SMS sent, light gray (#E5E5EA) for received.

WhatsApp

Light green (#DCF8C6) for sent, white for received. Teal (#075E54) accent.

Messenger

Blue (#0084FF) for sent, light gray (#E4E6EB) for received.

Try other styles:

Frequently Asked Questions

What is a chat bubble?
A chat bubble is a speech balloon styled like messaging apps — iMessage, WhatsApp, Messenger, Telegram. It has a smooth, pill-shaped body with a small tail at the bottom corner, just like the bubbles you see in your phone's messaging app.
How do I simulate a conversation?
Add multiple chat bubbles. Use "Bottom Left" tail for received messages and "Bottom Right" for sent messages. Alternate them vertically to create a back-and-forth conversation layout.
Can I change the bubble color to match iMessage green/blue?
Yes. Use Custom Colors to set any fill color. Green (#34C759) for sent iMessage, gray (#E5E5EA) for received. Blue (#007AFF) for sent with another iPhone user.
Is this good for UI/UX mockups?
Yes. Designers use it for wireframes, app demos, and pitch decks. The Chat style produces clean, app-like bubbles. Export as PNG and import into Figma, Canva, or presentation slides.
Can I overlay chat bubbles on a screenshot?
Yes. Upload any image — a phone screenshot, a photo, or a blank canvas — then add chat bubbles on top. Great for "texts from..." meme formats.
What's the difference between Chat and Classic style?
Chat has a smooth, modern pill shape like iMessage. Classic has a more traditional comic-style rounded rectangle. Chat looks like a messaging app; Classic looks like a comic book.