Build a realistic Instagram post mockup and download it as a PNG. Upload the photo, set the handle, location, caption, likes, and comments, then switch light or dark. Free, no sign-up, and everything runs in your browser. For parody, mockups, and design comps only.
For parody, mockups, education, and design comps only. Do not use this to impersonate real people or brands, fake evidence, or mislead anyone about a real Instagram post.
You just designed a post mockup. These free CommonNinja widgets put your actual Instagram on your website, where you own the traffic, no code needed.
Pull your real Instagram grid onto your own website automatically, so the page stays fresh without you updating it by hand.
Show your posts as a swipeable slider that fits a narrow section without taking over the whole page.
Turn your best posts into a rotating carousel that keeps visitors looking at your work a little longer.
Make it one tap for visitors to share your page. Every share pushes the graphic you just made past your own audience.
Other free tools for social content and mockups.
Build a realistic WhatsApp-style conversation mockup with bubbles, ticks, and timestamps. Download a PNG.
Use Tool →Design a Telegram-style chat mockup in light or dark mode and export it as a clean PNG.
Use Tool →Create a Messenger-style conversation mockup with blue pill bubbles. Free, in your browser.
Use Tool →Mock up a Reddit-style post with votes, awards, and a threaded comment section. Export a PNG.
Use Tool →Create realistic X (Twitter) post screenshots with views, checkmark tiers, and bookmarks. Download a clean PNG.
Use Tool →Build an iPhone text message mockup with blue iMessage or green SMS bubbles, reactions, and a Read receipt.
Use Tool →Mock up a Facebook post with reactions, shares, and a comment thread. Export a PNG.
Use Tool →Build an Instagram DM mockup with gradient bubbles, heart reactions, and a Seen label.
Use Tool →Create a Snapchat chat mockup with colored side bars, a snap score, and a status on every row.
Use Tool →Place bold text behind your subject in one click. Automatic cutout, no sign-up, all in your browser.
Use Tool →How It Works
No account, no sign-up, completely free. The mockup renders live and the PNG is generated in your browser, so neither your caption nor your photo is ever uploaded to a server.
Start here. Instagram is image-first, so the photo carries the card and everything else arranges itself around it.
Set the handle, an optional location, and the caption. Keep it short and lowercase, the way real captions run.
Set the likes and comments, add a couple of visible replies, then export a crisp 2x PNG for a slide, a comp, or a meme.
The Details
Facebook and Instagram are both feeds owned by the same company, and mockup tools routinely draw one and relabel it. Three details separate them, and all three are easy to get wrong.
photo first + caption below + no share count
The image comes before the words, the caption sits under the action icons prefixed with the handle, and there is no public share count anywhere on the card, only likes and comments.
The comment styling is the other giveaway. Facebook wraps each comment in a rounded gray pill. Instagram runs them as plain text under the caption, with the handle in bold and nothing behind it. If you have ever looked at a mockup and felt that it was Instagram-ish without being able to say why it was off, this is usually the reason.
After that it is proportion. Comments tend to land at a small fraction of the likes, and captions run short. A card with eight thousand likes, three comments, and a four-sentence marketing paragraph is internally inconsistent in three directions at once, no matter how accurate the chrome around it is.
Two things worth saying plainly. Believable styling is for design work, never a reason to present a mockup as a real post, and on this platform that particularly means not inventing brand deals or endorsements. And because the card is built around a photograph, use images you actually have the rights to.
Settings
Seven controls shape the look of the export. This is what each one does and the job it is best suited to.
| Setting | What it does | Best for |
|---|---|---|
| Photo | The image the whole card is built around, shown at full width | Not optional in practice. Instagram is image-first, so this carries the mockup Most used |
| Handle | The username at the top, with a gradient ring around the avatar | Lowercase with a dot or underscore. Never a formatted first and last name Most used |
| Location | A small line under the handle | A detail most mockups skip. Adds a lot of realism for one short field Situational |
| Caption | Text under the action row, prefixed with the handle in bold | Instagram puts the caption below the photo, never above it Most used |
| Likes and comments | The like count and the "View all N comments" line | Instagram shows no share count publicly, which is why there is no field for one Most used |
| Visible comments | Up to six comments as plain text, each with a handle and a like count | Plain text, not gray bubbles. That is the clearest difference from a Facebook post Situational |
| Dark theme | True-black card rather than a white one | What a large share of Instagram users actually see, and better for reels Most used |
Themes follow the common light and dark Instagram palettes as of 2026. This tool is a generic design mockup and is not affiliated with, or endorsed by, Instagram or Meta.
Use It Right
A post mockup is a design asset. These are the everyday jobs it is built for, and the uses that turn it into something else entirely.
| Scenario | What it is | Verdict |
|---|---|---|
| Client and portfolio comps | Showing how a photo or a campaign will look in a real feed before anything ships | Good use |
| Pitch decks and case studies | Illustrating a social strategy with example posts that do not exist yet | Good use |
| Memes and skits | Clearly humorous posts from invented accounts | Good use |
| Product and app mockups | Filler feed content in a UI comp or a design system example | Good use |
| Faking an endorsement or brand deal | Inventing a post from a real brand or creator to imply a partnership that never happened | Never |
| Impersonation or faked evidence | Presenting a mockup as a genuine post from a real account | Never |
Avoid These
Four of these are craft. The first two are not negotiable. Read them before you export anything that will leave your own screen.
The one rule that matters more than every design tip here. A mockup is not a record of anything. Using one to claim a partnership, win an argument, or mislead a client or a platform is fraud, not design.
Never present it as realThis one is specific to the image-first platforms. The mockup card is generic, but the photo inside it is somebody’s work. Use your own images, or licensed ones, especially if the export leaves your machine.
Own the photoInstagram leads with the username. "Studio Oak" in the header reads as Facebook. Something like studio.oak is what a real post shows.
Handles, not full namesInstagram does not display shares publicly, only likes and comments. A mockup showing a share count is instantly wrong to anyone who uses the app, which is why this tool has no field for one.
No public share countThat is Facebook’s pattern, not Instagram’s. Instagram runs comments as plain text under the caption. Mockups made in a generic post tool almost always get this wrong.
Plain text commentsCaptions on Instagram run short, lowercase, and often a little oblique. A polished marketing paragraph is the fastest way to make the whole card read as staged.
Short and lowercaseBest Practices
All CommonNinja widgets mentioned below are free to start. Apply these while you build the card and after you place the image.
01
Everything else is furniture around the image. Pick or shoot the photo first, then write a caption that suits it, rather than designing the card and dropping an image in at the end.
02
The card renders the photo at full feed width. A square or near-square crop sits in the layout the way a real post does, where a very tall or very wide image will not.
03
A large share of Instagram users run the app dark, so a black card often reads as more authentic than a white one, and it makes most photos look better too.
04
One short place name under the handle is on almost every real post and missing from almost every mockup. It is the cheapest realism available here.
05
Comments usually land somewhere around a fortieth of the likes, give or take a lot. Eight thousand likes with three comments, or with six thousand, both read as invented.
06
Not a rule, but a very strong convention, especially for design, art, and creator accounts. It is a small signal that does a lot of work.
07
A mockup is a graphic. An embedded feed is your actual Instagram, refreshing itself on a page you own, so the audience you earned lands somewhere you control.
Add an Instagram feed free →08
If a full feed is too much for the space, a slider shows the same work in one row and keeps the rest of the page intact.
Add an Instagram slider free →Glossary
Six terms that come up whenever you design an Instagram screenshot. Useful if you make these for a team or a client.
From the Blog
More from the CommonNinja blog. Free, no sign-up, just practical posts on growing an audience and putting it to work.
In this article, we are going to discuss incentives, and learn how to use them to boost engagement on your website.
Read article →In this article, we are going to explain what website engagement is & how to increase it.
Read article →In this article, we are going to discuss the top ten Instagram feed widgets for your website.
Read article →This article covers embedding Instagram feeds on websites, highlighting benefits like enhanced aesthetics and increased...
Read article →In this article, we are going to discuss how to use social media to drive traffic to your website.
Read article →In this article, we are going to explain how to use videos on your website to boost engagement.
Read article →