Mockup Generator
This free mockup generator puts your logo on real product photos in seconds: drop in an image, pick a product, and the design sits in correct perspective on the t-shirt, mug, sign or screen – with the folds and light of the photo. Everything stays on your device.
Source: Heckbert (1989) – Fundamentals of Texture Mapping and Image Warping, UC Berkeley UCB/CSD-89-516 (projektive Abbildung Quadrat → Viereck). Updated: .
How it is calculated
In short: A mockup is a realistic preview that shows how a logo or design looks on a real product. This mockup generator places your image in correct perspective on eight product photos – t-shirt, hoodie, mug, shop sign, business card, laptop, phone and framed poster – and keeps the folds, shadows and shine of the photo. It runs entirely in your browser: no account, no watermark, no upload.
How it works
- Drag in your logo or image, pick a file, or paste it with Ctrl + V. Without an image, a sample logo is drawn from the text you type.
- Tap a product. The preview updates instantly.
- Adjust size and position. Keep “Remove white background” on for logos on white; switch on “Fill the whole area” for photos and screenshots.
- “Save mockup” downloads a PNG or JPG; “All 8 as ZIP” renders every product at once – handy for pitches, online stores and client proposals.
The math behind it
Flat surfaces such as the sign, the poster or a screen appear at an angle in the photo. From the four corners of that surface the tool computes a projective mapping (homography), the method Paul Heckbert described for texture mapping in 1989. For every pixel of the photo it works backwards to the matching spot in your design and blends the four neighbouring pixels (bilinear interpolation), so there are no jagged edges or seams. The mug is curved, so the design is wrapped around a cylinder: compressed towards the sides and following an elliptical arc at the top and bottom.
To look printed rather than pasted, the design is multiplied with the brightness of the product photo (the W3C “multiply” blend mode). Fabric folds and the shadow on the mug show through the print, and highlights on the ceramic stay visible. Screens emit light, so they are not darkened.
Honest limits
The product photos are 1024 to 1216 pixels on the long side – plenty for websites, stores and social media, but not a print-ready file. They were generated locally for this site with an image model and show no brands. A mockup is a preview: real colors depend on the printing method and material. Very thin lines in a logo can look slightly uneven on fabric because of the folds.
Privacy
Your logo is processed only in your browser and never uploaded. Only your settings (product, size, text) are remembered – never the image.
Related: remove background for logos without transparency, and the business card maker for a print-ready PDF.
Frequently asked questions
How do I make a mockup for free?
Drag your logo into the box above, pick a product and click “Save mockup”. There is no sign-up, no watermark and no limit on how many you make.
What is a mockup?
A mockup is a preview image that shows a design on a real object – say a logo on a t-shirt or mug – before anything is printed or produced. It is used for client proposals, online stores, presentations and social media.
Does my logo need a transparent background?
Ideally, yes (a transparent PNG). For logos on white there is the “Remove white background” option; for colored backgrounds, use the remove background tool first.
Can I show a screenshot on a laptop or phone?
Yes. Choose “Laptop” or “Phone”, drop in the screenshot and switch on “Fill the whole area”. The image is laid onto the screen in perspective, and the phone’s camera notch and bezel stay visible.
Can I use these mockups commercially?
Yes. The product photos were created for this site and contain no third-party brands. You do, of course, need the rights to your own logo and artwork.
How are mockups made in Photoshop?
You place the logo as a smart object on the product photo, distort it with Perspective Warp and set the layer to Multiply. This page does exactly those steps – perspective and multiply – automatically.
Sources and legal basis
- Heckbert (1989) – Fundamentals of Texture Mapping and Image Warping, UC Berkeley UCB/CSD-89-516 (projektive Abbildung Quadrat → Viereck)
- W3C – Compositing and Blending Level 1: multiply B(Cb, Cs) = Cb × Cs
- ITU-R BT.709 – Luminanz Y = 0,2126 R + 0,7152 G + 0,0722 B
- MDN – CanvasRenderingContext2D.getImageData() / putImageData()
- W3C – Web Share API
- ITU-T T.81 / ISO/IEC 10918-1 – JPEG
- W3C – Portable Network Graphics (PNG) Specification
- Google for Developers – An image format for the Web (WebP)
- AOMedia – AV1 Image File Format (AVIF)
- MDN – Image file type and format guide
- MDN – HTMLCanvasElement.toBlob()
As of: · Editorial policy
Related tools
- Remove the Background from an ImageRemove image backgrounds automatically: the AI runs in your browser, full resolution, transparent PNG or solid colour. No upload, no sign-up, free.
- Business card maker: print-ready PDF with bleedDesign business cards online: front and back, logo, 3.5 × 2 in or 85 × 55 mm, bleed and crop marks – as a PDF for your printer or a Letter/A4 sheet. No upload.
- Add text to a photoAdd text to images with 8 fonts, outline, shadow or a background bar. Drag, rotate and save in full resolution – free, no sign-up, nothing uploaded.
- Free online photo editorPhoto editor in your browser: crop, resize, rotate, adjust brightness, contrast and saturation, add filters and text, undo, then save as JPG, PNG or WebP.
- Circle crop an imageCrop an image into a circle: move and zoom the circle, save as PNG with transparent corners – perfect for profile pictures. Sizes and border, no upload.
- QR Code Generator – free and permanentQR code generator for links, Wi-Fi, contacts (vCard), email, SMS or phone – add colors and a logo, download PNG or SVG. Never expires, no tracking, no sign-up.
- Social media templates for posts and storiesFree social media templates: quote, event poster, sale, job ad and birthday for Instagram, Stories, Facebook and LinkedIn – no sign-up, no watermark.
- Convert SVG to PNGConvert SVG to PNG in your browser: set the size in pixels or as a scale factor, keep a transparent or pick a background color, up to 20 files as ZIP. Free.
- EPUB to PDF converterConvert EPUB to PDF: choose an e-book, set the page size and save it as a PDF, each chapter on a new page. Free, no upload, in your browser.