WebToolsPlanet

Instagram DM Generator — Dark & Light Chat Mockups

Create a fictional Instagram-style chat in dark or light mode. Edit the messages and download PNG or JPG. Free, private, and no login needed.

Last updated: October 20, 2026

Create a mockup
Client-Side Processing
Input Data Stays on Device
Instant Local Execution
Something wrong with this tool? Report it

Find this tool useful? Support the project to keep it free!

Buy me a coffee
Examples

Instagram DM Dark Mode vs Light Mode Examples

Choose Dark for a near-black chat background with lighter text, or Light for a bright interface. Both themes use the same messages and contact details. Switch themes in the editor to compare them, then download the version you need. These are fictional Instagram-style mockups, not screenshots from an Instagram account.

Dark Mode Example

An Instagram-style DM conversation in dark mode with a near-black background.

  • Dark Instagram-style theme
  • Text, image and emoji messages
  • Quoted replies
  • Timestamps and Seen status
  • Optional typing indicator
Load this exampleCustomize
Instagram-style DM mockup in dark mode with three fictional support messages and a Seen label.

Light Mode Example

The same conversation in light mode with a bright interface.

  • Light Instagram-style theme
  • Text, image and emoji messages
  • Quoted replies
  • Timestamps and Seen status
  • Optional typing indicator
Load this exampleCustomize
The same three fictional support messages in a light-mode Instagram-style DM mockup with a Seen label.
Simple 3-step guide

How to Create an Instagram-Style DM Screenshot

Create your own Instagram-style conversation in minutes: choose a theme, customize your messages and export the result.

No design experience needed

  1. Step 1: Choose your theme

    The editor's Dark and Light theme switch above the live preview of a fictional Instagram-style conversation.

    Select Dark or Light

    Pick the appearance you want. Your conversation updates instantly in the live preview.

  2. Step 2: Edit your conversation

    The editor's Messages tab listing three editable messages with sender, text and time fields and an Add blank message button.

    Customize the details

    Add sent and received messages. Edit names, avatars, images, replies, timestamps and Seen status.

  3. Step 3: Preview and export

    The Download PNG, Download JPG and Copy image buttons above the live preview of a dark-mode conversation.

    Save your screenshot

    Check the finished mockup, then download a PNG or JPG, or copy the image if your browser supports it.

Real Instagram

Turn On Dark Mode in the Real Instagram App

This tool generates Instagram DM screenshots and cannot change your account. If you also want dark mode in the actual Instagram app, follow the steps below for your device.

On iPhone (iOS)

Follow these steps to turn on Dark appearance on your iPhone, then open Instagram.

  1. Step 1: Open Settings

    Tap the Settings app on your iPhone.

  2. Step 2: Go to Display & Brightness

    Scroll down and tap Display & Brightness.

  3. Step 3: Select Dark

    Under Appearance, choose Dark. You can also touch and hold the brightness control in Control Center and select Dark Mode.

  4. Step 4: Open Instagram

    If the app still looks light, check the appearance options in your installed version.

On Android

Follow these steps to turn on Dark theme on your Android phone, then open Instagram.

  1. Step 1: Open Settings

    Tap the Settings app on your Android phone.

  2. Step 2: Go to Display

    Tap Display. It may be under "Display & brightness" on some devices.

  3. Step 3: Enable Dark theme

    Turn on Dark theme. The route and option names can vary by device.

  4. Step 4: Open Instagram

    If the app still looks light, check the appearance options in your installed version.

What Can You Customize?

Set a display name separately from the username, upload an avatar, and adjust the activity text, verified badge, status bar time and icons. Dark and Light use the same underlying conversation.

Add sent or received messages, photos, quoted replies, date/time separators and a Seen receipt. Edit, delete or reorder messages using the labeled controls. Choose a 1×, 2× or 3× export; save a draft in this browser only when you explicitly choose Save draft.

Ways to Use a Fictional DM Mockup

  • Prototype a support conversation or brand reply before publishing a customer-service guide.
  • Plan a fictional creator collaboration or social campaign with sample messages.
  • Illustrate a tutorial or presentation without exposing a private conversation.
  • Create a clearly labeled fictional exchange for a story, lesson, or meme.

How This Tool Works

The editor renders the conversation as styled HTML. On export, html2canvas captures the chat at the selected scale. PNG supports transparency around the rounded corners; JPG uses the chat's background color. Image copy writes a PNG through the browser's clipboard API. If clipboard access is unavailable or denied, download the image instead.

Technical Stack

Reacthtml2canvasClient-side only

Local rendering

Message text, avatars, and attached images are not uploaded for processing. The image is rendered in your browser, and the editor does not connect to an Instagram account or API.

Usage Policy

Use this generator for mockups, parody, teaching, design work, and private jokes. Do not use it to impersonate a real person, harass or defame anyone, spread misinformation, or pass a fabricated chat off as evidence. Add a clear "MOCKUP" label when sharing outside a private joke or presentation context.

Frequently Asked Questions

Does this send a real message on Instagram?

No. This tool only generates an image that looks like an Instagram DM thread. It does not connect to Instagram, does not require login, and nothing you type is delivered to anyone on the platform. It is a visual mockup, not a messaging client.

How do I create a dark Instagram DM screenshot?

Choose Dark in the editor, edit the conversation, then download PNG or JPG. The exported image uses the selected theme. Choose Light to export the same conversation with a bright background.

How do I turn on dark mode in real Instagram messages?

On iPhone, open the device Settings app → Display & Brightness → Dark. On Android, open device Settings → Display → Dark theme. Device menus and app behavior vary; if Instagram stays light, check the appearance options in your installed app version. The Apple and Android reference links in the real-app help section explain the OS settings. This generator cannot change your account or app settings.

Can I add images, replies, and a verified badge?

Yes. Attach an image to a message, choose an earlier message to quote, and enable the verified badge in the contact settings. These are visual mockup elements and do not verify a real account.

Can I download as JPG or copy the image?

Yes. You can download a PNG or a JPG, or use "Copy to clipboard" to paste the image straight into a chat or document. Clipboard copy needs a browser that supports image clipboard access; if yours does not, use Download instead.

Is it okay to use this to prank a friend or make a meme?

Mockups made here are for entertainment, presentations, and prototyping. If you share one, make it clear it is not a real screenshot. Presenting a fabricated conversation as genuine (for example, to harass, defame, or deceive someone) is not an appropriate use of this tool.

Can I add more than two people to the thread?

This generator is built for one-on-one DM threads (a single contact and "you"). Group chat mockups with multiple participant names are not currently supported.

Are my photos and messages uploaded to a server?

Message text, avatars, and attached images are not uploaded for processing. The preview and exported image are rendered locally in your browser.

What image size does the download produce?

The chat has a base width of 375 pixels. Export at 1x, 2x, or 3x for a width of 375, 750, or 1,125 pixels; height follows the conversation. Each message can contain up to 1,000 characters.

Related tools

Related Social Media Tools

Explore more free tools to create, edit and optimize your social media content. They run in your browser, like this one.

  • Instagram Post Generator

    Create realistic Instagram post mockups for presentations, concept proofs, and social media planning.

    Try tool

  • Instagram Story Generator

    Create a realistic Instagram Story mockup — 9:16 format with progress bar, header, and caption overlay — for presentations and content planning.

    Try tool

  • Instagram-Style Filters

    Apply Clarendon, Gingham, Lark, Juno, and other Instagram-inspired photo filter presets using CSS.

    Try tool

  • iMessage Chat Generator

    Create a fake iMessage or text message with blue or green bubbles, black background dark mode, iPhone status bar, and Delivered receipt. Download as PNG or JPG.

    Try tool

  • WhatsApp Chat Generator

    Create a realistic fake WhatsApp chat mockup with sent/delivered/read checkmarks, downloadable as PNG.

    Try tool

  • Tweet to Image Converter

    Convert tweet text to a beautifully designed image card — share quotes, testimonials, and posts on Instagram, LinkedIn, and Pinterest.

    Try tool

Explore all free tools

Image, text, SEO, developer and social media tools to make your work easier.

Browse all tools

Part of a Collection