FIRST CHTools

FIRST CH TOOLS / Images / 72 DEVICE MOCKUP 3D

3D Device Mockup Generator

Place a screenshot on the screen of a 3D phone or laptop and get a PNG that is ready for a social post or a landing page. Angle, scene and background colour are picked from presets. Drawing happens in your own browser (WebGL); images are never uploaded.

Drag & drop a screenshot here or click to choose a file / paste with Cmd+V or Ctrl+V (PNG / JPEG / WebP / GIF)

Device

Body colour

Angle

Scene

Background

Export

How to Use

  1. Add a screenshotDrag and drop it, click to choose it, or paste it with Cmd+V / Ctrl+V. Portrait images switch to the phone and landscape images to the laptop automatically. A sample screen is shown to start with.
  2. Pick the presetsChoose the device and body colour, then the angle, scene and background colour. Match the ratio (16:9, 1:1, 9:16 and so on) to where the image will go.
  3. Export"Save PNG" downloads the image and "Copy image" puts it on the clipboard. With a "Transparent" background you get a cut-out PNG that keeps the shadow.

About This Tool

In a promo image for an app or a website, a screenshot shown on a real-looking device tells people at a glance what they are looking at, far better than a bare screenshot. This tool draws 3D phone and laptop models with three.js (WebGL), puts your screenshot on the screen and takes the picture. The controls are limited to choosing presets, so no 3D software skills are needed. The devices are generic shapes, not copies of any manufacturer's product.

The phone screen is about 9:19.5 (close to an iPhone screenshot) and the laptop screen is 16:10. Images with a different ratio can be fitted by "Crop from the top" (for tall full-page screenshots), "Crop from the centre" or "Fit whole image". The "Floating" scene lifts the device off the floor and softens its shadow; "Against a wall" casts the shadow on a wall behind it. "Transparent" leaves the background unpainted and keeps only a semi-transparent shadow, so the PNG can sit straight on top of a landing-page design.

Drawing and exporting happen entirely in the browser; images are never uploaded to a server (3D drawing needs WebGL). Only still images (PNG) can be exported; there is no video mockup, saving or sharing. To add a background and shadow while staying flat, use the Screenshot Frame; to cut images to each platform's sizes, Social Media Image Resizer; and to make the PNG lighter, Batch Image → WebP.

Settings can also be passed as URL parameters (the image itself is chosen on the page). Example: /en/device-mockup-3d/?device=laptop&angle=left&scene=float&bg=navy&finish=silver&ratio=1:1 (device=phone,laptop / angle=front,left,right,high,flat / scene=floor,float,wall,none / bg=paper,white,mist,sand,sakura,leaf,sky,vermilion,navy,ink,transparent or a colour code (with %23) / finish=black,silver,white,blue / fit=top,center,contain / ratio=16:9,1.91:1,4:3,1:1,4:5,9:16 / scale=1,2).

Other Tools