Device Frame Mockup

Drop a screenshot, paste it, or choose a file

PNG, JPG, WebP or another image your browser can open, up to 20 MB

Press Ctrl+V or Cmd+V anywhere on this page to paste a screenshot. A new one replaces the current one.

Device

Frame colour

Background

The checkerboard is only shown here. The PNG keeps a transparent background.

Padding48 px

Drop shadowSoft shadow under the device. Needs some padding to show.

Fit

Cover fills the screen and crops what does not fit, keeping the top. Contain shows the whole screenshot with bars at the sides or top and bottom.

Preview

Your screenshot lands here

Add a screenshot to download the image.

Image includes FindUtils.com watermark

How to Put a Screenshot in a Device Frame

Add your screenshot

Drop an image on the drop zone, click Choose file, or press Ctrl+V or Cmd+V anywhere on the page to paste a screenshot from your clipboard. A file that is not an image is refused with a message under the drop zone.
Pick the device

Choose Phone, Android phone, Tablet or Browser. For Browser, type the text you want in the address bar. Then pick a Black, Silver or White frame.
Set the background and spacing

Keep the background transparent, pick a solid colour, or choose one of four soft gradients. Move the Padding slider to set the space around the device, and turn the drop shadow on or off.
Choose the fit and download

Cover fills the screen and crops the bottom of a tall screenshot; Contain shows all of it. Click Download Image to save a PNG with a FindUtils.com watermark.

Popular Use Cases

Slides and pitch decks

Show an app screen or a web page inside a device frame on a slide, so the audience sees at once whether it is a phone app, a tablet layout or a website.

Landing page and design drafts

Drop a framed screenshot into a hero section while you try out a layout, and swap it for final artwork later. A transparent PNG sits on any page colour.

Portfolios and case studies

Present screens from a project you worked on in a consistent frame, with the same background and padding on every image.

Tutorials and documentation drafts

Frame the screen a step talks about so readers can tell a mobile view from a desktop view, without opening a design tool.

Why use the Device Frame Mockup?

A bare screenshot on a slide or a landing page draft reads as a loose rectangle. Placed inside a phone, tablet or browser frame it reads as an app or a website at a glance. This tool draws the frame from simple shapes, puts your screenshot in the screen, and gives you a PNG with a transparent, solid or gradient background, all in your browser and with nothing uploaded.

The Device Frame Mockup puts one screenshot inside a device frame and saves the result as a PNG. There are four frames: a phone with a pill-shaped cut-out at the top of the screen, an Android phone with a punch-hole camera, a tablet with an even bezel, and a browser window with three dots and an address bar whose text you type yourself. Each comes in black, silver or white. The frames are drawn from simple shapes, not photographs, and carry no logos or device-maker names.

Add the screenshot by dropping it, choosing a file, or pasting it with Ctrl+V or Cmd+V anywhere on the page. The image is read in your browser and never uploaded. Choose Cover to fill the screen or Contain to show the whole screenshot, set the padding and the drop shadow, and pick a transparent, solid or gradient background. A transparent background stays transparent in the PNG; the checkerboard is only in the preview. Every download carries a FindUtils.com watermark.

It does not tilt the device into a 3D or angled view, it does not use real device photos, and it holds one screenshot per image. For code snippets, the Code Screenshot Generator makes framed code images; to capture your screen first, use the Screenshot Tool; and to fit a finished image to a platform's sizes, try the Social Media Image Resizer.

How it compares

Design tools and dedicated mockup sites offer photographed devices, angled scenes and many device models, often behind an account. This tool is smaller on purpose: four flat frames drawn in the browser, one screenshot at a time, no account and no upload. If you need a realistic photo of a hand holding a phone or a perspective scene, a photo-based mockup service is the better fit.

Compared with placing a screenshot inside a frame by hand in an image editor, you skip lining up the screen area and rounding its corners: the screenshot is clipped to the screen shape for you, and changing the device, colour or background takes one click. The watermark on every PNG is part of the tool and cannot be switched off.

Tips for Clean Device Mockups

Take the screenshot at the device's own shape: a phone-shaped screenshot fills the phone frame with Cover and nothing important is cropped.
Use Contain when the whole screenshot must stay visible, for example a wide desktop page in the phone frame.
Keep the background transparent when the PNG goes onto a page or slide that already has its own colour.
Give the drop shadow room: with the padding at 0 the shadow is cut off at the edge of the image.
Use the same device, frame colour, background and padding for every image in a set so they look like one series.
The PNG is twice the size the preview draws, so view the page on a wide screen when you want the largest image.

Frequently Asked Questions

Can I remove the watermark?

No. Every PNG carries a FindUtils.com watermark and there is no setting to remove it. A framed screenshot can look like a finished, real product shot, so the image says plainly that it is a mockup made with a free tool.

Is my screenshot uploaded anywhere?

No. The file is read in your browser and the PNG is drawn in your browser. Nothing is sent to a server, and removing the screenshot or leaving the page releases it from memory.

Are the frames real device models?

No. The frames are generic shapes named Phone, Android phone, Tablet and Browser. They do not copy a specific model, and no logos or device-maker names are drawn. The tool is not affiliated with or endorsed by any device maker or browser vendor; product names mentioned anywhere are trademarks of their owners.

What does the tool not do?

It does not tilt or rotate the device into a 3D or angled perspective, it does not use real device photos, and it holds one screenshot per image, so it cannot place several devices side by side. It also has no copy-to-clipboard button: the result is downloaded as a PNG file.

How do I paste a screenshot?

Copy a screenshot to your clipboard, then press Ctrl+V (Cmd+V on a Mac) anywhere on this page. A paste into the address bar text field stays text. A pasted file that is not an image shows the error under the drop zone.

What is the difference between Cover and Contain?

Cover fills the whole screen and crops what does not fit, keeping the top of the screenshot where the header usually is. Contain scales the screenshot so all of it is visible, with bars at the sides or at the top and bottom when its shape differs from the screen's.

Is the transparent background really transparent in the PNG?

Yes. The checkerboard behind the device is only drawn in the preview to show which parts are clear. The downloaded PNG has a transparent background around the frame, apart from the watermark and the drop shadow if it is on.

How big is the downloaded image?

The PNG is twice the size the preview draws. On a wide screen the phone is drawn 280 pixels wide, so the PNG is 560 pixels wide plus twice the padding. On a narrow screen the preview is smaller and so is the PNG. To change the pixel size afterwards, use the Image Resizer.

Can I use the images commercially?

Yes, you can use them in presentations, drafts and marketing material as long as the watermark stays visible. The tool grants no rights to any device maker's or platform's trademarks.

Which image files can I use?

Any image your browser can open, such as PNG, JPG, WebP or GIF, up to 20 MB. If the browser cannot decode a file, the tool says so under the drop zone and keeps the current screenshot.