Is this device mockup generator free?

Yes. Every device, colour, angle and export size is free, with no sign-up and no watermark.

Can I make an iPhone or iPad mockup with it?

You can make a mockup of a modern phone or tablet that looks like today's popular models, which is what most people need for an app or website preview. The models are generic and drawn in code; they are not official Apple product images, and this tool is not affiliated with Apple.

Can I make a website or browser mockup?

Yes. Choose Browser to place a screenshot of your site in a desktop browser window with an address bar — type your own domain and pick a light or dark toolbar — or choose Desktop to show it on a large display on a stand.

How do I get a transparent PNG mockup?

Set the background to Transparent and the format to PNG (or WebP), then download. The shadow is kept as soft, semi-transparent pixels, so it blends with whatever you place the mockup on.

How do I rotate the device?

Use the X, Y and Z sliders or type an exact angle from −180° to 180°. You can also drag the device in the preview — hold Shift to spin it — or click the preview and use the arrow keys. The presets jump to common views, and Reset returns to the default angle.

What resolution can I export?

1080, 2048 or 4096 pixels on the long side, or a custom size up to 8192 pixels, in 1:1, 4:5, 16:9, 9:16 or 4:3. The mockup is rendered fresh at that size, so it is sharp rather than upscaled.

My screenshot is cut off on the screen. How do I show all of it?

Switch Screen fit from Fill to Fit, which shows the whole image with bars in a colour you choose. With Fill, the alignment buttons decide whether the top, middle or bottom of a tall screenshot is kept.

Is my screenshot uploaded?

No. The 3D scene runs in your browser with WebGL, and the image never leaves your device.

It says WebGL is unavailable. What can I do?

The 3D view needs WebGL. Enable hardware acceleration in your browser's settings, update your graphics drivers, or try another browser; any current version of Chrome, Edge, Firefox or Safari supports it.

3D Device Mockup Generator: Phone & Laptop

Your screenshot on a real-looking 3D device, at any angle

Drop a screenshot or design and it appears on the screen of a 3D phone, tablet, laptop, desktop display or browser window. Turn the device on the X, Y and Z axes with sliders, typed angles, arrow keys or by dragging it; pick a device colour, a background and a soft shadow; then export a sharp PNG, JPEG or WebP up to 8192 pixels — with a transparent background if you want to place it on your own slide or landing page. The devices are modelled in code and rendered with WebGL in your browser, so nothing is uploaded and there is no watermark.

How to make a device mockup

1Drop a screenshot on the page, choose a file, or paste it with Ctrl/⌘ + V. Until you do, a sample app screen is shown.
2Choose Phone, Tablet, Laptop, Desktop or Browser. Pick a colour — or, for the browser window, a light or dark toolbar and the address shown in it. Phones and tablets can be turned to landscape; the laptop's lid opens to any angle.
3Pick a view from the bar above the preview — Hero ¾, Front, Tilt left/right, Isometric or Flat lay — then fine-tune in the View tab, or drag the device in the preview.
4Set the background (transparent, solid, gradient or a blur of your own screenshot), the shadow and the light direction.
5Choose the aspect ratio, size and format, then download the image or copy it to the clipboard.

Phone, tablet, laptop, desktop and browser mockups in 3D

Flat mockup templates give you one fixed angle. Here the device is a real 3D model, so you can show it straight on for an App Store–style screenshot, at a dramatic three-quarter angle for a hero image, or lying flat for a social post — from the same upload, in seconds.

The phone mockup has a modern edge-to-edge display with a pill-shaped camera cut-out, a polished metal frame and a triple-lens camera on the back. The tablet mockup has slim, even bezels in the style of current iPad-class tablets, and the laptop mockup has a full keyboard, trackpad and a lid you can open from closed to fully reclined. They are generic designs that resemble today's popular devices — useful wherever people search for an iPhone mockup, iPad mockup or MacBook mockup — but they are not official product images and this tool is not affiliated with Apple or any other manufacturer.

Website mockups in a browser window

For a website or web app, choose Browser: your screenshot fills the page area of a clean desktop browser window, with window buttons and an address bar showing the domain you type in. The toolbar comes in light and dark to match your design, and the window can float at any angle like the devices — or face straight on for a crisp, flat website mockup.

Prefer real hardware? Desktop puts the page on a large display with slim bezels on an aluminium stand, the way a site is seen on a studio monitor. With Fill and Top, a long full-page screenshot shows its first screen, just as a visitor sees it.

Controls

Rotation X, Y and Z: X tips the device towards or away from you, Y turns it left and right, Z spins it in the picture plane. Each runs from −180° to 180° and accepts typed values. In the preview, drag to turn on X and Y, hold <kbd>Shift</kbd> while dragging to spin on Z, or focus the preview and use the arrow keys (<kbd>Shift</kbd> for 15° steps), <kbd>Q</kbd>/<kbd>E</kbd> for Z and <kbd>R</kbd> to reset.
Zoom and field of view: Zoom changes how much of the frame the device fills. The field of view sets the perspective: a wide angle exaggerates depth like a phone camera held close, while a very narrow one looks almost orthographic, like a product render or an isometric illustration.
Screen fit: Fill covers the whole screen and trims the overflow — anchor it to the top to show the start of a long, full-page screenshot. Fit shows the entire image with bars in a colour of your choice, and Stretch distorts it to the screen's shape.
Glass reflection: A subtle reflection of the studio lighting on the cover glass, which makes the screen read as glass rather than a sticker. Turn it off for perfectly flat screen colours.
Background and shadow: Export on a transparent background, a solid colour, a two-colour gradient or a soft blur of your own screenshot. The shadow can sit on the floor under the device, which suits a laptop on a desk, or on the wall behind it, which gives a phone a floating drop shadow.
Lighting: The device is lit by a soft studio environment, so metal and glass pick up realistic reflections. The light angle swings the lights and reflections around the device; intensity makes the whole scene brighter or darker.

Export sizes and formats

The image is rendered again at the size you export — 1080, 2048 or 4096 pixels on the long side, or any custom size from 256 to 8192 — in square 1:1, portrait 4:5, landscape 16:9, story 9:16 or 4:3. Because it is a fresh render rather than an enlarged preview, the edges stay crisp at every size, whatever the size of your screen.

PNG is lossless and keeps transparency, the right choice for a mockup you will place on a website, slide or design file. WebP also keeps transparency and is much smaller. JPEG has no transparency, so a transparent background is filled with white. Copy puts a PNG on the clipboard, ready to paste into Figma, Keynote, Slack or a document.

Tips for better mockups

Export the screenshot at the device's own resolution — a phone screenshot of roughly 1179 × 2556 or a 2560 × 1600 desktop capture — so the screen stays sharp even in a 4K mockup.
A three-quarter angle with a light from the same side as the turn looks most natural; a front view works best for app store listings.
For a landing page hero, use a transparent PNG and let your page's own background show through.
Need the screenshot cropped or resized first? Use the image cropper or the image resizer, and the social media image resizer to fit the finished mockup to every platform.

A free mockup generator that keeps your designs private

Unreleased app screens and client work should not be uploaded to someone else's server. Here your screenshot is read, drawn and rendered entirely on your device with WebGL; it is never sent anywhere. There is no account, no watermark and no limit on how many mockups you make. Your settings — device, angle, background and export options — are remembered in this browser; the image is not.

Frequently asked questions

Is this device mockup generator free?: Yes. Every device, colour, angle and export size is free, with no sign-up and no watermark.
Can I make an iPhone or iPad mockup with it?: You can make a mockup of a modern phone or tablet that looks like today's popular models, which is what most people need for an app or website preview. The models are generic and drawn in code; they are not official Apple product images, and this tool is not affiliated with Apple.
Can I make a website or browser mockup?: Yes. Choose Browser to place a screenshot of your site in a desktop browser window with an address bar — type your own domain and pick a light or dark toolbar — or choose Desktop to show it on a large display on a stand.
How do I get a transparent PNG mockup?: Set the background to Transparent and the format to PNG (or WebP), then download. The shadow is kept as soft, semi-transparent pixels, so it blends with whatever you place the mockup on.
How do I rotate the device?: Use the X, Y and Z sliders or type an exact angle from −180° to 180°. You can also drag the device in the preview — hold Shift to spin it — or click the preview and use the arrow keys. The presets jump to common views, and Reset returns to the default angle.
What resolution can I export?: 1080, 2048 or 4096 pixels on the long side, or a custom size up to 8192 pixels, in 1:1, 4:5, 16:9, 9:16 or 4:3. The mockup is rendered fresh at that size, so it is sharp rather than upscaled.
My screenshot is cut off on the screen. How do I show all of it?: Switch Screen fit from Fill to Fit, which shows the whole image with bars in a colour you choose. With Fill, the alignment buttons decide whether the top, middle or bottom of a tall screenshot is kept.
Is my screenshot uploaded?: No. The 3D scene runs in your browser with WebGL, and the image never leaves your device.
It says WebGL is unavailable. What can I do?: The 3D view needs WebGL. Enable hardware acceleration in your browser's settings, update your graphics drivers, or try another browser; any current version of Chrome, Edge, Firefox or Safari supports it.