Device Mockup & Screenshot Beautifier

A screenshot is the fastest way to show what something looks like — an app screen, a website, a dashboard, a chat. But a bare screenshot dropped into a slide, a tweet, or a landing page looks unfinished: a flat rectangle floating on white. A mockup fixes that. It wraps the screenshot in a realistic device, sits it on a tasteful background, adds a little breathing room and a soft shadow, and — when you need it — marks it up with arrows, highlights, and labels. This guide walks through every part of that, and you can do all of it with the free tool at the top of this page. Everything runs in your browser.

What a mockup actually adds

A good mockup is just a few small touches stacked together:

• A device frame — a phone, laptop, or browser window that gives the screenshot a sense of scale and says “this is a real product.”
• A background — a gradient or solid colour instead of an empty white void, so the image reads as designed.
• Padding — space around the framed content so it isn’t cramped against the edges.
• Rounded corners — softening the screen so it feels like a real screen, not a clipping.
• A drop shadow — lifting the whole thing off the page for depth.
• A slight tilt — an optional, gentle rotation that adds a dynamic, three-dimensional feel.
• Annotations — arrows, boxes, blur regions, and text for explaining or redacting.

How to make a mockup, step by step

1. Open your screenshot. Drag it onto the tool above, click Choose screenshot, or paste one from your clipboard. PNG, JPG, and WebP all work; GIF and BMP open too.
2. Pick a device frame. Choose Browser for web apps and sites, Phone for mobile apps, Laptop for dashboards and desktop software — or None to beautify the bare screenshot.
3. Choose a background. Switch between a Gradient preset (with an adjustable angle), a Solid colour, or None (transparent).
4. Beautify. Use the sliders for padding, corner radius, shadow, and tilt until it looks right. The preview updates live.
5. Annotate (optional). Add arrows, boxes, blur regions, or text labels — see below.
6. Download. Export a high-resolution PNG, JPG, or WebP.

Choosing the right device frame

The frame sets the context, so match it to what you’re showing:

• Browser window — the title bar with its traffic-light buttons and the address-bar pill instantly signal a website or web app. Capture the page at a typical desktop width (around 1280–1440px) so the proportions look natural.
• Phone — a modern phone outline with rounded corners and a notch-style cutout. A tall, portrait screenshot at the device’s native resolution fills it cleanly. Ideal for app-store images and stories.
• Laptop — a clean laptop lid that suits dashboards, editors, and any landscape desktop UI.
• None — no chrome at all; the screenshot itself gets the rounded corners, padding, background, and shadow. Great when the frame would distract from the content.

Backgrounds and beautifying

The background does most of the visual lifting. A gradient adds energy and depth; pick a preset and rotate the angle to change the mood. A solid colour is calmer and works well for minimal, on-brand sets. Transparent (None) lets you drop the mockup onto any background later — just export as PNG or WebP, because JPG can’t store transparency.

Padding controls how much background shows around the framed content. Corner radius softens the screen’s corners (set it to 0 for crisp square corners). Shadow controls how strongly the mockup floats above the background. Tilt rotates the whole composition a few degrees for a three-dimensional look — use it sparingly.

Annotating and redacting

Annotations turn a screenshot into an explanation. The tool gives you four, each in any colour:

• Arrow — drag from start to end to point at a button or element.
• Box — drag to draw a rectangle that highlights an area.
• Text label — click to drop a labelled chip that names a feature.
• Blur — drag over a region to pixelate it.

The blur tool is the one to remember before you share anything publicly. Drag it over private details — names, email addresses, account numbers, API keys — and the region is pixelated in the exported file, so the hidden text can’t be recovered.

Picking the output format

By default the mockup exports as PNG, which is lossless and supports transparency — the safest choice for graphics and screenshots. Switch to JPG for the smallest file when there’s no transparency (keep quality around 85–95), or WebP for a modern format that’s usually smaller than both at the same quality. If you chose a transparent background, stick to PNG or WebP to keep it.

The tool keeps your screenshot at its native resolution and scales the frame and background around it, so the exported image is large and sharp — ready for a product page, an app-store listing, a blog post, or a social card.

Is it private? Where does the work happen?

The whole composition is done in your browser using the Canvas API — the new image is created on your own device, which is also why it’s instant. How any data associated with this tool is handled is described in our privacy policy. If you’re working with something highly sensitive, an offline desktop tool is always the most private option.

A few practical tips

• Crop first if needed. If your screenshot already has browser chrome, crop it to just the content so it doesn’t double up inside the browser frame.
• Resize for the destination. If you need exact pixel dimensions for an app store or ad, resize the exported mockup afterwards.
• Compress for the web. A big PNG can be heavy; run the result through compress to shrink it without visible quality loss.

Frame it, give it room to breathe, add a tasteful background, and redact anything private — with those habits, the tool above turns any plain screenshot into a polished image in seconds.