Free device [mockup] generator

A raw screenshot rarely does your work justice. A device mockup wraps it in a recognizable frame, a Mac window, a phone, a tablet, so it reads as a real product the moment someone sees it. This generator draws every frame on the fly and exports a clean PNG, all inside your browser.

A device mockup is a picture of your screenshot shown inside a frame that looks like the device it came from. Instead of a flat rectangle floating on a slide, your interface sits inside a laptop, a phone, or a browser window, with a little padding and a soft shadow that lifts it off the page. It is the difference between a screen grab and something that looks designed.

People reach for mockups everywhere: landing pages and hero images, App Store and Play Store listings, pitch decks, changelog posts, documentation, and social media. The frame gives the viewer context. A shot inside an iPhone reads instantly as a mobile app. The same shot inside a browser reads as a web product. The frame does the explaining so your caption does not have to.

1
Upload your screenshot
Click Upload screenshot and pick a PNG, JPG, or WebP. It loads straight into the preview. Nothing is sent anywhere, the file is read locally in your browser.
2
Pick a frame
Choose a MacBook, iPhone, iPad, or browser window. The browser frame adds traffic-light dots and an address bar you can edit to show your own domain.
3
Set the background and shadow
Pick a gradient, a solid color, or a transparent background. Nudge the shadow slider until the device lifts naturally off the backdrop.
4
Adjust scale and position
Use the scale, padding, and vertical position sliders to give the frame room to breathe and sit exactly where you want it in the canvas.
5
Download the PNG
Click Download PNG. You get a high-resolution image, with a transparent background if you chose that option, ready to drop into a deck, a page, or a post.

There are three common ways to make a device mockup, and each has a trade-off. Free web generators like this one are the fastest for a single image: no account, no files, just pick a frame and download. Figma and Sketch mockup kits give you full control over angles and composition, but you have to find a good kit, place your screenshot inside a component, and line it up with the mask, which is slow for a quick one-off.

The third way is to never leave your capture tool at all. A native app can frame a shot the instant you take it, so you are not exporting a bare screenshot and then pasting it into a second tool to make it presentable.

• Free browser generators: best for a quick, one-off framed screenshot.
• Figma and Sketch kits: best when you need custom angles or a specific scene.
• A native Mac app: best when you frame captures every day and want it automatic.

This page frames a single still image. If you frame screenshots often, or you also record your screen, doing it by hand every time adds up. Here is how the free tool lines up against Kapshot, the native Mac app it comes from.

The free tool covers the still-image job completely. Kapshot adds the parts a browser page cannot: framing that happens the moment you capture, and the same clean look on screen recordings, complete with cursor-following auto-zoom and one-click audio.

Screenshots are only half of what people share. A short screen recording often explains a feature faster than any still, and it deserves the same clean framing. Kapshotwraps live recordings in a real window frame and follows your cursor with a smooth auto-zoom, so the important part of the screen is always in focus without a single edit. The screenshot side works the same way: capture, and it comes out already framed, with a background and a real shadow.