Upload your logo or artwork, drop it onto a clean product mockup, and download a PNG. T-shirts, mugs, tote bags, phone cases, posters, and stickers. Free, no sign-up, and your design never leaves your browser.
Drop your design or click to browse
PNG, JPG, or WebP. Up to 25 MB. A transparent PNG logo works best.
100% in-browser. Your design is never uploaded to a server. The mockup is built on your device.
Other free tools to grow your store and margins.
Calculate gross, operating, and net profit margins for your products.
Use Tool →Calculate your return on ad spend and see if your campaigns are profitable.
Use Tool →Calculate your cart abandonment rate, compare to benchmarks, and see your lost revenue.
Use Tool →See how discounts affect your margins and how many extra sales you need to break even.
Use Tool →Work out shipping costs and find the free-shipping threshold that protects your margin.
Use Tool →Calculate how much each customer is worth over their entire relationship with your business.
Use Tool →How It Works
No account, no sign-up, completely free. The whole mockup is built in your browser, so your design is never uploaded to any server.
Drop a PNG, JPG, or WebP up to 25 MB. A transparent PNG logo gives the cleanest, most realistic print.
Choose a t-shirt, mug, tote, phone case, poster, or sticker, then set the product and background colors.
Scale and position your design in the print area, then export a high-resolution PNG with one click.
Why It Matters
A design sitting flat in a folder is an idea. The same design shown on a shirt, a mug, or a tote is a product someone can picture owning. That shift, from concept to object, is what a mockup does, and it is why it earns clicks and sales.
design → product template → placed in the print area
Your artwork is painted inside a defined print area on a clean, flat product drawn right on the canvas. Because the shape and the print area are consistent, every mockup you make reads as part of the same set.
Mockups also de-risk a launch. Before you commit to a print run or pay for samples, a clean preview tells you whether a logo reads at the right size, whether the colors work together, and whether the design belongs on that product at all. It is the fastest way to gut-check an idea.
And they travel well. A single, uncluttered product shot slots straight into a store listing, a social post, an ad, or a pitch deck. The cleaner and more consistent your mockups, the more your storefront and feed look like the work of an established brand.
Product Templates
Six flat product templates, each with its own print area. Recolor the product and the background on any of them to match your brand.
| Product | Print area | Best for |
|---|---|---|
| T-shirt | Chest / center | Apparel drops, merch previews, and team or event shirts Great fit |
| Mug | Front panel | Brand gifts, cafe merch, and logo-on-a-desk lifestyle shots Great fit |
| Tote bag | Center | Eco merch, conference swag, and bold single-logo designs Great fit |
| Phone case | Back panel | Print-on-demand accessories and pattern or icon art Also works |
| Poster / framed print | Inner mat | Wall art listings, quote prints, and portfolio pieces Also works |
| Sticker | Die-cut face | Logo stickers, laptop art, and packaging inserts Also works |
Design Files
The file you upload decides how clean the mockup looks. A little prep before you drop it in goes a long way.
| What to check | Recommendation | Why it helps |
|---|---|---|
| File type | Transparent PNG for logos, high-quality JPG for full photos | A transparent PNG lets the product color show around your mark, so it reads as a real print rather than a sticker on a box. |
| Resolution | Upload the largest, sharpest version you have | The download is generated at a high canvas resolution. A small, soft source looks blurry once it is scaled up onto the product. |
| Safe area | Keep important detail away from the print-area edges | Each product has a defined print area. Text or logos that run to the very edge can feel cramped, so leave a little breathing room. |
| Contrast | Match the design to a product color it stands out against | A dark logo on a dark shirt disappears. Recolor the product, or the background, so the design stays legible. |
| Orientation | Crop your design before uploading if it needs it | The tool contain-fits your image and keeps its aspect ratio. Trimming empty margins first gives you more control over placement. |
Guidance reflects common print-on-demand and merch design practice.
Troubleshooting
Almost every disappointing mockup comes down to one of these six. Most are about the design and colors you start with, not the tool.
A small or soft source image looks fuzzy once it is scaled onto the product and exported. Start from the largest, crispest file you have so the mockup stays sharp.
Bigger source = crisper mockupPushing the scale slider to the max can spill the design past where a real print would sit. Keep it inside the print area so the mockup stays believable.
Respect the print areaA design that fights the product color reads as an accident. Recolor the product so your artwork sits on a shade that flatters it.
Pick a color that flattersA loud backdrop pulls attention off the product. A clean, single-tone background keeps the eye on what you are actually selling.
Keep the backdrop cleanA flat JPG places your logo as a rectangle with a visible box around it. Use a transparent PNG so only the mark itself lands on the product.
Use a transparent PNGDetail crammed against the edge of the print area feels tight and can look clipped. Leave a margin so the design breathes on the product.
Leave a marginBest Practices
All CommonNinja widgets mentioned below are free to start. Apply these while you design and after you post.
01
A logo on a transparent background lets the product color show through, so it reads like a genuine print. It is the single biggest upgrade to a mockup.
02
Do not settle for the default. Set the product color to a shade your design pops against, and match the background to your brand palette.
03
Use the scale and position sliders to sit your artwork where a real print would go. A design that respects the print area always looks intentional.
04
A single, clean mockup per image outperforms a cluttered collage. Export one product at a time and let each design stand on its own.
05
Post the mockup where your audience lives, then pull that feed onto your site so shoppers see fresh product shots without leaving.
Add Instagram Feed free →06
A good product shot earns shares only if sharing is one tap. Add share buttons to the page your mockups and listings live on.
Add Share Buttons free →07
Reuse the same background and product colors across a set so your t-shirt, mug, and tote read as one collection on your store and profile.
08
A row of clean mockups on your homepage tells a shopper you are the real thing. Let your Instagram feed do that work automatically.
Add Instagram Feed free →Glossary
Six terms that come up whenever you make product mockups. Bookmark this if you build merch previews for a team.
From the Blog
More from the CommonNinja blog. Free, no sign-up, just practical posts on building a brand and growing your store.
In this article, we are going to explain how to reflect your brand identity in your website design.
Read article →In this article, we are going to discuss the importance of the Homepage and how to design it.
Read article →In this article, we are going to discuss common mistakes in header and footer design and how to avoid them.
Read article →In this article, we are going to discuss responsive design.
Read article →In this article, we are going to discuss AI, how it revolutionizes the industry of web design and discuss the future of...
Read article →In this article, we’ll discuss why choosing the right email marketing platform is essential to your campaign’s success.
Read article →