Mockup Generator — Phone, Laptop, Browser, T-Shirt and Packaging Mockups

A free mockup generator for screens, prints and merch

This mockup generator puts your screenshot, app design, artwork or logo onto a realistic frame — a phone, tablet, laptop, monitor, browser window, framed poster, T-shirt, mug or product box — and gives you a high-resolution PNG for a portfolio, landing page, pitch deck or online shop listing.

Drop in an image, pick a mockup, and tilt flat devices and posters in 3D. The perspective is a true projective transform, so straight lines in your design stay straight and the far edge shrinks the way it would through a camera. Everything is drawn in code from simple shapes — generic devices with no brand logos — and your image never leaves your browser.

How to make a mockup

1. Drop your screenshot or design on the box (or paste it with Ctrl+V). Until then a sample design is shown.
2. Choose a Mockup: Phone, Tablet, Laptop, Monitor, Browser, Poster, T-shirt, Mug or Box.
3. Set the device or product colour, how the image fits (fill and crop, or show all) and, for phones, tablets and posters, the orientation.
4. For flat mockups, drag Turn and Lean to tilt it in 3D; for a mug, set how far the print wraps around.
5. Pick an output size and background (gradient, solid or transparent), then press Download PNG.

Mockup Generator features

How the perspective works

A flat mockup (with your image on it) is drawn first as a flat picture. Its four corners are then rotated in 3D by the turn and lean angles and projected through a virtual pinhole camera, which makes the far side smaller. The tool solves the 3 × 3 homography that maps the flat picture onto those four projected corners and fills every output pixel by mapping it back into the flat picture — the same maths as a camera photographing a flat sheet.

This matters for quality: a simple “distort” that stretches the corners linearly bends straight lines and puts the centre of your design in the wrong place. With a projective warp, the centre of the screen lands exactly where the diagonals of the tilted screen cross, as it does in a photo. The box mockup uses the same warp for each face, and the mug wraps your design round a cylinder, compressing it towards the edges as a real mug does.

Getting the best results

• Use a screenshot at the device’s aspect ratio: tall (about 9:19.5) for phones, 4:3 for tablets, 16:10 for laptops and 16:9 for monitors. Choose “Fit (show all)” to avoid cropping.
• For T-shirts and mugs, a PNG logo with a transparent background looks most natural. “Blend into fabric” suits light garments; use the solid print on dark ones.
• Choose a transparent background to place the mockup on your own page or slide, or a gradient for a ready-to-post image.
• For a social preview image with text, the OG image maker is quicker; for exact sizes per network, see social media image sizes.

What this tool does not do

The devices, prints and products are generic drawings, not photographs of real products, and they carry no brand names or logos — so they are safe to use commercially, but they are not photo-real. The T-shirt is a front view with shading, not a model wearing it, and there is no video or animated mockup. Very large images are scaled down to the output size you choose.