Device Mockup Generator

Device Mockup Generator

Place screenshots in device frames - iPhone, MacBook, iPad, Android, browser windows. Free online mockup generator for presentations and marketing

A screenshot of your app inside an iPhone frame on a marketing page sells the product in a way that a bare screenshot never does. The mockup says "this works on a real device, this is real". This tool places your screenshots inside accurate device frames — iPhone (current and recent models), iPad, MacBook, Pixel, Samsung Galaxy, browser windows, Apple Watch — with proper proportions, retina-quality frames, and optional contextual backgrounds (gradients, photographs).

Why context matters for marketing visuals

  • Bare screenshots look like dev artifacts. Same screenshot in a device frame looks like a polished product.
  • Device frames communicate the device platform — readers see "this is iPhone-native" or "this is web-app".
  • Shadow and reflection convey three-dimensionality. The same screenshot floating against a soft gradient looks deliberately placed.
  • Scaling cues — a screenshot inside an iPhone next to a screenshot inside a MacBook tells the reader "responsive" without saying it.
  • Aspirational context — placing a device on a desk photograph implies usage in a beautiful workspace; placing in pure white implies clinical product photography.

Device dimensions that matter

  • iPhone 15 / 16 series — 1179×2556 (Pro), 1284×2778 (Pro Max). Aspect ~19.5:9.
  • iPhone older (8, SE) — 750×1334. Aspect 16:9.
  • iPad Pro 11" — 2388×1668. Aspect 4:3 (landscape).
  • iPad Pro 13" — 2752×2064.
  • MacBook Pro 14" — 3024×1964. Browser screenshots are typically captured at 1440 wide / 1620 tall logical px.
  • MacBook Air 13" — 2560×1664.
  • Browser desktop window — 1440×900 or 1920×1080 typical. Insert into a Chrome/Safari frame with tab and address bar.
  • Pixel 8 Pro — 1344×2992. Aspect ~20:9.
  • Apple Watch Series 9 — 396×484 (45mm) or 368×448 (41mm).

Working example: a launch hero image

Input

A SaaS app screenshot, want a hero image for the marketing site

Output

Suggested composition:
  - Device:        MacBook Pro 14" (light frame on light backgrounds, dark on dark)
  - Background:    Soft gradient or product-context photo (desk, plants, coffee)
  - Shadow:        Subtle (10-15% opacity, large blur)
  - Position:      Centered, slightly elevated
  - Reflection:    Optional; subtle ground-shadow only

Export sizes:
  Hero (desktop):    1920×1080  or  2560×1440 for retina
  Hero (mobile):     750×1334
  Open Graph image:  1200×630
  Twitter card:      1200×675

Keep raw screenshot under the device frame at the device's native resolution
to avoid blur. Most modern devices need 2x or 3x assets for retina sharpness.

Mockup quality is largely about the source screenshot quality. A 1440×900 screenshot blown up to fit a 4K Mac mockup looks soft; a native 2880×1800 screenshot looks crisp. Capture at 2x resolution at minimum.

Pitfalls in marketing mockups

  • Wrong device for audience — showing an iPhone for a B2B SaaS that is primarily desktop-used. Match the device to the actual primary platform.
  • Outdated device model — using a frame for an iPhone 8 in 2026 dates your marketing. Refresh frames yearly.
  • Status bar with fake time / battery — the placeholder "9:41 AM 100% battery" Apple uses is a tell-tale sign. For premium feel, set realistic time and full but not maxed battery.
  • Inconsistent placement across the site — every mockup at a different angle, scale, lighting. Pick one style and reuse.
  • Cluttered backgrounds — busy photo + device + UI fights for attention. Simpler is usually better; let the device frame do the design work.

When to reach for this tool

  • You are designing a marketing landing page and need hero images of your app.
  • You are preparing App Store / Google Play screenshots (which have strict aspect ratios per device).
  • You are pitching investors or writing a deck and want polished product mocks.
  • You inherited bare screenshots in marketing materials and want to elevate them without redesigning.

What this tool will not do

  • It will not edit your app screenshot. Imperfect UI in the source remains imperfect after mocking. Polish the screenshot first.
  • It will not provide every obscure device. Common devices are supported; if you specifically need a Samsung Note from 2018 or a Surface Duo, dedicated mockup libraries (Mockuuups Studio, BLD Mock) have wider catalogs.
  • It will not generate App Store / Google Play marketing screenshots automatically. Those have specific copy and design conventions (caption overlays, feature callouts) that need design work beyond placing into a frame.

Mockup generation happens in your browser via Canvas API. Your screenshot stays local; the rendered mockup is yours to download and use.

Frequently asked questions

Do I need permission to use device frames?

For Apple devices in marketing showing your app: Apple's Marketing Resources page provides official frames you can use with attribution. For generic / artistic mockups: most stock mockups are licensed for use. For commercial use, verify the source license.

What's the right time to set on the iPhone status bar?

Apple uses 9:41 AM (the time the original iPhone was unveiled). For your own marketing, any time works; some teams use 9:41 to match Apple's aesthetic; others use 10:08 (the time clock store displays often show because the hands form a smile). Avoid suspicious times (00:00, exactly 12:00) that look artificial.

Can I use stock device mockups?

Many free / paid stock mockup libraries exist (Mockup World, Pixeden, BLD Mock, Mockuuups Studio). Verify license — some are free with attribution, some require purchase. Apple and Google publish official frames for free use.

How big should my mockup file be?

For web use: 200-500 KB compressed (WebP, JPEG q=85). For print or high-res displays: 1-3 MB. Optimizing source screenshots and the final mockup is critical — uncompressed 10MB mockups slow your marketing page significantly.

Should I mockup multiple devices side-by-side?

For "works on every device" messaging, yes — three devices (phone, tablet, laptop) communicate the breadth. Beware of clutter; arrange in a clean overlap pattern or grid, not a chaotic pile.

Is there an "honest" angle for a device mockup?

Straight-on (front view, no tilt) is the most documentary; isometric or 30-45° tilt is more designed; perspective with depth is more dramatic. For technical accuracy (showing real UI), use straight-on. For marketing energy, use tilted views.

Related tools

Favicon Generator

Generate favicons in all sizes (16x16, 32x32, 180x180) from any image. Create ICO and PNG favicons. Free online favicon maker for websites

Image Converter

Convert images between PNG, JPEG, and WebP formats. Batch conversion with quality control. Free online image format converter

Image Compressor

Compress and resize images online without losing quality. Reduce JPEG, PNG, WebP file size. Free image optimization tool with adjustable quality

Code Screenshot Generator

Create beautiful code screenshots with syntax highlighting. Carbon-like code images with themes. Free online code snippet to image converter

Last updated · E-Utils editorial team