deviceshots.com

A screenshot mockup is a raw screenshot placed on a styled background—gradient or solid color—with a shadow, padding, and sometimes a 3D tilt, so it looks like a designed product shot instead of a plain screen grab. You make one by capturing or importing an image, applying those styling controls, and exporting at 2× PNG in an aspect ratio that fits where you'll post it. Screenshot Beautifier Pro is a Chrome extension built for exactly this workflow: capture, edit, export, without opening Figma or another design app.

Screenshot mockup vs. raw screenshot

A raw screenshot is documentation. A mockup is presentation. The difference matters because the two get used in different places.

Use a raw screenshot when accuracy is the point and any styling would be misleading. Use a mockup when the image is marketing or presentation and you want the viewer's eye drawn to the interface rather than the desktop behind it.

The four styling elements that define a mockup

These are the controls that separate a mockup from a screenshot, and each one does a specific job.

• Background — a gradient or solid color sits behind the screenshot. Screenshot Beautifier Pro ships a library of curated gradients plus solid colors, with a one-click shuffle to cycle combinations.
• Shadow — three shadow styles with adjustable blur, spread, and opacity. This is what makes the screenshot appear to float above the background rather than sit flat on it.
• Padding — sliders that control the whitespace between the screenshot edge and the canvas edge. Too little padding and the mockup looks cramped; too much and the screenshot shrinks into the frame.
• 3D tilt — a subtle perspective rotation that adds depth. Keep it small; a heavy tilt distorts UI text and makes the screenshot harder to read.

There's also an optional footer watermark for your name or brand, which you can toggle on or off per export.

Choosing the right capture method

Screenshot Beautifier Pro accepts images four ways, and the right one depends on where your screenshot already lives.

• Capture Tab — screenshots the active browser tab at full fidelity. Best when the thing you want to show is a live web page and you haven't captured it yet.
• Region Select — drag a custom selection to grab only the area you want. Best when the full tab includes sidebars, browser chrome, or content you'd crop out anyway.
• Upload Image — drop in an existing screenshot or image file from your computer. Best when the screenshot was taken elsewhere, on another device, or by someone else.
• Paste from Clipboard — pastes whatever image is on your clipboard, from any source. Best for the fastest path when you've just copied a screenshot.

If you're unsure, capture the tab and crop later with padding controls—you lose nothing, since padding lets you frame the visible area.

Export settings and why they matter

Export produces a 2× PNG, which means the file is rendered at double the on-screen dimensions so it stays sharp on high-density displays and when platforms re-scale it. You choose from preset aspect ratios—1:1, 16:9, 9:16, 4:5—or auto-fit.

Match the ratio to the destination:

• 16:9 for landing pages, blog headers, and wide product shots
• 1:1 for feed posts and thumbnails
• 9:16 for stories and vertical video covers
• 4:5 for portrait feed placements
• Auto-fit when you want the canvas to hug the screenshot's own proportions

Common pitfalls

Blurry exports. Usually caused by exporting at 1× and then upscaling, or by starting from a low-resolution source image. Export at 2× and capture the tab at full fidelity rather than screenshotting a zoomed-out window.

Mismatched aspect ratios. A 16:9 mockup dropped into a 1:1 slot gets cropped or letterboxed by the platform. Pick the ratio before you style, not after.

Overdone tilt and shadow. Heavy 3D tilt plus a wide, dark shadow reads as a template rather than a product shot. Small tilt, moderate shadow blur, and generous padding look more deliberate.

Inconsistent branding across a set. If you're exporting several mockups for one page, reuse the same gradient and padding values. The shuffle button is useful for exploring, but a mixed set looks accidental.

When this workflow fits

Screenshot Beautifier Pro is a reasonable fit if you work in Chrome, want mockups for social posts, landing pages, or product listings, and don't want to open a full design tool for each one. It's a poor fit if you need pixel-accurate documentation, layered editing, or output formats beyond PNG. The extension is described as free to add to Chrome; check the current listing for any limits before relying on it for a large batch.

Drop your screenshot into a MacBook frame, size the canvas for where it will be published, then export at up to 4× or copy it straight to your clipboard. On Device Shots this runs entirely in the browser with no sign-up, and you can start either from a MacBook template or from a blank canvas up to 6000 px. The steps below follow that order: pick the canvas, add the MacBook frame, place the screenshot, style it, export.

Step 1: Pick a canvas size that matches where the image will live

The canvas decides the aspect ratio, and the aspect ratio decides whether your MacBook mockup gets cropped later. Start from a template when one matches your destination, or set a custom canvas if you need something else.

A MacBook screen is wide, so a wide canvas (16:10 or 16:9) leaves less empty space around the device than a square or portrait one. If your target is a portrait format like a Pinterest pin, expect to scale the MacBook down and use the extra room for a headline.

Step 2: Add the MacBook frame

Choose a device frame, then drop, paste, or upload your screenshot into it. The site lists 76 phones, tablets, laptops, and watches, so pick the laptop frame that matches the machine you want to show. If you would rather show a web page than a laptop body, the browser window option gives you 9 vector window styles in light or dark, each with an address bar you can type into — useful when the point is the site itself rather than the hardware.

Two practical notes:

• A MacBook frame implies a desktop layout. A screenshot taken on a phone will look stretched inside it, so use a desktop-width capture when possible.
• Browser frames stay sharp at any size because they are vector, which matters if you export large.

Step 3: Place the screenshot inside the screen

Drop, paste, or upload the image, then adjust position and scale until it sits inside the screen area without clipping the edges of your UI or distorting the aspect ratio.

• Match the aspect ratio first. If your screenshot is 16:9 and the laptop screen area is 16:10, you will either crop a little or leave a thin band — decide which edge can lose a few pixels.
• Keep the top of the screenshot aligned with the top of the screen. Cropping from the bottom usually reads as intentional; cropping the header does not.
• Avoid non-uniform scaling. Stretching to fill is the most common reason a mockup looks fake.

Step 4: Style the background, shadow, and text

Background, text, shadows, and icons are all adjustable. For a portfolio or Dribbble shot, a dark studio background with a soft shadow reads as a product shot. For a landing page hero, a light background with a headline above or beside the laptop usually fits the surrounding page better. Add a headline only if the image will be seen without supporting copy — a social post or a thumbnail — and keep it short enough to read at the size it will actually appear.

Step 5: Export at the right resolution

Export at up to 4×, or copy straight to the clipboard. The 4× option matters when the mockup will be displayed larger than its canvas size, such as a retina hero image or a presentation on a big screen. Copying to the clipboard is the faster path when you are pasting into a design tool or a chat.

Check two things before you finish:

• Export size versus canvas size. A 1600 × 1200 canvas at 4× gives you 6400 × 4800, which is more than most destinations need. Match the export multiplier to the final display size rather than always using the maximum.
• Background transparency. If the background is transparent and the destination expects a solid color, the mockup may render on white or black unexpectedly. Set a background color when in doubt.

Common problems and what causes them

The screenshot looks blurry. Usually the source capture is lower resolution than the space it fills. Re-capture at a higher resolution, or reduce how much of the canvas the laptop occupies.

The image is stretched or squashed. The screenshot's aspect ratio does not match the screen area and it was scaled to fill. Scale uniformly and crop instead.

The export is the wrong size. The canvas was set for one platform but exported for another. Re-check the template size against the destination's requirements before exporting.

The background came out transparent or the wrong color. No background was set. Add one if the destination does not handle transparency.

The laptop looks too small or too large in the frame. This is a canvas choice, not a device choice. A wide canvas with a laptop that fills most of the width reads better than a square canvas with a small laptop floating in the middle.

When this approach fits

This workflow suits anyone who needs a MacBook mockup from an existing screenshot for a portfolio, landing page, or social post, and who wants to stay in the browser without installing anything or creating an account. It is less suited to work that needs custom 3D perspective, reflections, or a specific physical MacBook model rendered from an angle — the frames here are flat, front-facing device and browser shells.

Drop your screenshot into a browser-based mockup editor, pick a canvas size that matches where the image will live, add a device or browser frame, then style and export. On Device Shots this takes three steps — pick a size, add devices and frames, style and export — and runs entirely in your browser with no sign-up. The main decision is choosing the right canvas first, because that determines whether your screenshot gets cropped or letterboxed later.

Step 1: Pick a canvas size that matches the destination

The canvas is the finished image size, not the device size. Choose it before you add anything, since templates are pre-sized for specific networks.

If none of the presets fit, set a custom canvas up to 6000 px on the longest side. Portrait canvases suit phone screenshots; landscape canvases suit laptop and browser shots.

Expected result: a blank canvas at the exact pixel size the platform expects, so nothing needs re-cropping after export.

Step 2: Add a device or browser frame and drop in the screenshot

Two frame families are available:

• Devices — phones, tablets, laptops, and watches. The site states 76 devices in total, including iPhone, MacBook, Galaxy, Pixel, Surface Pro, and iMac frames.
• Browser windows — 9 vector window styles, each in light or dark, with an editable address bar. Options include Safari (compact bar, centred address), Safari with tabs, Chrome, Chrome (Windows) with caption buttons instead of traffic lights, Edge with rounded tabs, Brave with orange accents, and Arc with tinted, inset content.

Steps:

1. Choose a device or browser window from the frame list.
2. Drop, paste, or upload your screenshot into the frame.
3. Type your product URL into the address bar if you picked a browser window — it renders as real text, so it stays sharp at any size.

Expected result: your screenshot appears inside the frame at the correct aspect ratio, with the browser chrome or device bezel rendered as vector art rather than a bitmap.

Step 3: Style, then export

Styling controls cover background, text, shadows, and icons. Add a headline if the image is going to a store listing or social post where the screenshot alone doesn't explain the product.

Export options:

• Export at up to 4× the canvas size for high-resolution output.
• Copy straight to the clipboard instead of downloading a file.

Expected result: a high-resolution PNG-style visual sized for your store listing, landing page, or social post.

Common failure points and how to avoid them

Screenshot aspect ratio doesn't match the frame. A desktop screenshot dropped into a phone frame will letterbox or crop. Match the frame family to the source: phone screenshots into phone frames, full-window captures into browser frames.

Blurry export. Exporting at 1× and then upscaling later loses sharpness. Export at 2×–4× directly, especially for App Store and Google Play listings where the store may re-compress the image.

Wrong template size causing cropping. Templates are locked to network dimensions. If you start from an Instagram Portrait template (1080 × 1350) and then try to use it as a YouTube thumbnail (1280 × 720), the crop will cut content. Pick the destination template first, or set a custom canvas before adding frames.

Text too small on tall canvases. Pinterest pins (1000 × 1500) and TikTok covers (1080 × 1920) are viewed small in feeds. Keep headlines short and increase font size relative to the canvas.

When this workflow fits — and when it doesn't

Use a browser-based generator like this when you need one or a few mockups quickly, want network-correct dimensions without calculating them, and don't want to install software or create an account. The site states it is free, requires no sign-up, and runs in the browser.

Consider a different approach if you need pixel-level control over perspective, custom device models that aren't in the 76-device library, or batch generation of hundreds of images from a script — those cases usually call for a design tool or an image pipeline rather than a template-driven editor.

Upload your screenshot or screen recording to a device mockup generator, pick an iPhone frame, choose a layout and background, then export. On Mock Magic, image mockups are free and unlimited, while video mockups require a paid plan. The workflow below covers both, plus the format and troubleshooting details that decide whether your export looks sharp or slightly off.

Image vs. video mockup: which one do you need?

If your content is static, a still mockup is faster and easier to place in layouts. If you need to show motion — a scroll, an animation, a tap flow — you need the video path, and that means a paid subscription.

Step-by-step: build the mockup

1. Prepare your source file. For a screenshot, export it at the native resolution of the phone you're framing (or close to it) rather than a downscaled copy. For a recording, export MP4 or WebM.
2. Upload it. Drop the screenshot or screen recording into the editor. The tool places your content inside the device screen area.
3. Pick the iPhone frame. Mock Magic offers 54+ device variants across iPhone, Android, iPad, MacBook, desktop monitors, and smartwatches, and the library is updated with new devices. Choose the iPhone model that matches your screenshot's aspect ratio.
4. Choose a layout template. Templates cover different orientations, single-device layouts, and multi-device compositions. Some templates are free; premium templates with advanced layouts are Pro-only.
5. Set the background (optional). Use a solid color from the color picker, a gradient, or upload your own background image. Custom backgrounds are saved to your account so you can reuse them in later mockups.
6. Export. Download in high resolution. Image exports are free; video export requires Pro.

The whole sequence is upload → frame → layout → background → export, and the site describes it as taking seconds.

Backgrounds: when they help and when they hurt

Backgrounds are optional. A solid color or gradient keeps the focus on the screen content and works well for App Store screenshots where consistency across a set matters. A custom background image can place the phone in a context — a desk, a brand-colored scene — but a busy image competes with the UI you're trying to show.

Practical rule: if the screenshot is dense (a dashboard, a feed), use a flat or subtle gradient. If the screenshot is sparse (a splash screen, a single button), a richer background adds visual weight.

Common problems and what to check

Screenshot proportions don't match the frame. A screenshot from one phone model stretched into a different model's frame will look distorted. Match the frame to the source aspect ratio, or crop the screenshot to the frame's ratio before uploading.

Export looks blurry. This usually traces back to the input, not the export. Upload the highest-resolution screenshot you have; a low-res source stays low-res no matter how it's framed.

Video won't upload. Confirm the file is MP4 or WebM. Other containers aren't listed as supported. Also confirm your plan includes video — video mockups are a Pro feature, so a free account will not export them even if the upload succeeds.

Custom background isn't available later. Custom backgrounds are saved to your account, so make sure you're signed in when you set them, otherwise they won't carry over to your next mockup.

Quick decision guide

• Free, still images only, unlimited → use Mock Magic's free plan for screenshots.
• Need motion → budget for Pro, and record in MP4 or WebM.
• Need multiple devices in one image → check whether the multi-device template you want is free or premium before committing to a layout.
• Need a consistent set for a store listing → build one background, save it, and reuse it across every screenshot.

You can turn a raw screenshot into a finished device mockup in a browser, without design software, by working in this order: pick the target canvas size first, choose a device frame or browser window, drop in the screenshot, then style and export. Device Shots is a free, no-sign-up mockup generator that runs entirely in the browser, with 76 phones, tablets, laptops and watches, 9 vector browser window styles, and templates sized for App Store, Instagram, YouTube, Open Graph, LinkedIn, TikTok and more. The steps below follow that tool because its workflow matches the task, but the sequence applies to any mockup generator.

Step 1: Pick the canvas size before anything else

The most common reason a mockup gets rejected or looks wrong is that it was designed at the wrong dimensions. Choose the destination first, then build inside it.

If your destination isn't listed, set a custom canvas up to 6000 px. Starting from a template is faster than starting blank because the device, background and text are already arranged — you swap the device, drop your screenshot, and you're done.

Step 2: Choose a device frame or a browser window

Two framing options cover most needs:

• Device frames — phones, tablets, laptops and watches. Use these when the screenshot is a mobile app or a desktop app and you want the hardware to sell the context.
• Browser windows — 9 vector styles in light or dark, each with an address bar you can type into. Options include Safari (compact bar, centred address), Safari with tabs, Chrome, Chrome for Windows (caption buttons, no traffic lights), Edge, Brave, and Arc (tinted, inset content). Use these when the screenshot is a website or web app and you want it to read as a live page.

Browser frames are vector, so they stay sharp at any export size. The address bar is editable, which matters for landing pages and Open Graph images — a real-looking URL is more convincing than a blank bar.

Step 3: Drop, paste, or upload the screenshot

With the frame in place, add your screenshot by dragging it in, pasting it, or uploading it. The screenshot fills the frame's screen area.

This is where most quality problems appear, and they're almost always aspect-ratio mismatches:

• Blurry result — the source screenshot is lower resolution than the frame's screen area at your export size. Export at a higher multiplier (up to 4×) only helps if the source has the pixels; otherwise re-capture the screenshot at a larger window size.
• Cropped or letterboxed result — the screenshot's aspect ratio doesn't match the device screen. A tall phone screenshot in a laptop frame will crop or leave bars. Match the source ratio to the frame: phone screenshot → phone frame, wide desktop capture → laptop or browser frame.
• Stretched result — the frame is scaling a mismatched ratio. Switch to a frame with a closer ratio rather than forcing it.

Step 4: Style it so it looks intentional

A screenshot in a frame still looks like a screenshot. Add the finishing layer:

• Background — a gradient or solid colour behind the device. Templates like "Galaxy S10 gradient" and "Neon stripes" show how much this changes the read.
• Headline text — one short line above or beside the device. This is what makes a store listing or social post scannable.
• Shadows — a soft drop shadow lifts the device off the background.
• Icons — small marks for ratings, badges or feature callouts.

Keep the text short enough to read at thumbnail size. A YouTube thumbnail at 1280 × 720 and a LinkedIn banner at 1584 × 396 both get viewed small, so a long headline disappears.

Step 5: Export or copy

Export at up to 4× resolution, or copy straight to the clipboard. For App Store and Google Play listings, export at the template's native size or higher — store review processes reject undersized or wrongly proportioned screenshots. For social posts, the template size is already correct, so a 1× export is usually enough; use 2× or 4× when the image will be displayed large or on high-density screens.

A worked example: App Store screenshot from a phone capture

1. Open the Google Play Screenshot · Pixel pair template (1080 × 1920) or set a custom 1080 × 1920 canvas.
2. Choose an iPhone or Pixel frame.
3. Drop your app screenshot into the frame. If it's a full-height phone capture, it should fill the screen without cropping.
4. Add a one-line headline above the device, e.g. the app's core benefit.
5. Set a background gradient that contrasts with your app's UI colours.
6. Export at 2× (2160 × 3840) for a crisp store listing.

Common snags and what to do

• The mockup looks empty. Add a headline and background — a bare device on white reads as unfinished.
• The browser frame looks wrong for a mobile app. Switch to a phone frame; browser chrome implies a website.
• Text is unreadable in the feed. Reduce the headline to a few words and increase its size relative to the canvas.
• Export is huge or slow. Drop from 4× to 2×; 4× is only worth it when the source screenshot has the resolution to support it.

The whole process — size, frame, screenshot, style, export — takes a few minutes per image once you've done it once, and the template library means you rarely start from a blank canvas.