What devices does the mockup generator support?

Five device frames: iPhone (modern rounded bezel with dynamic island), Android phone (similar form factor with squarer corners), iPad (tablet aspect), MacBook (laptop lid framing), and Browser Window (web-app chrome with traffic-light buttons). Each frame is rendered as vector shapes on the canvas — no licensed PNG overlays, no royalty restrictions on commercial use.

Can I use these mockups commercially?

Yes. Every device frame is drawn from scratch as vector shapes on the canvas — there are no copyrighted device renders or photographed mockups under the hood. The exported PNG is yours to use in marketing, landing pages, social posts, paid ads, app store screenshots and any other commercial context.

What's the difference between iPhone and Android frames?

iPhone uses a deeply rounded body with the dynamic-island camera cluster at the top. Android uses similar proportions but with slightly squarer corner radius and no dynamic island. Both are designed to read as 'modern smartphone' instantly without locking you into a specific brand model.

Why does my screenshot look stretched / cropped?

Each device frame has a fixed aspect ratio for its screen area. A landscape screenshot dropped into a portrait phone is automatically cover-fit (scaled and centred to fill the screen, with overflow cropped). For best results, capture your screenshot at the device's native aspect ratio (portrait for phones, landscape for laptops, browser windows and tablets-in-landscape).

Can I add multiple devices in one mockup?

The current generator places one device per export. For multi-device hero shots (phone + laptop side by side), export each device separately, then combine them in PikDraw's Image Combiner or Collage Maker.

Does PikDraw upload my screenshot anywhere?

No. The whole generator runs in your browser using the HTML5 Canvas API. Your screenshot, the rendered mockup and the exported PNG never leave your device. There's no server round-trip, no telemetry, no signup, no watermark and no daily limit.

What size is the exported mockup?

Export size depends on the device and padding. An iPhone with default 120 px padding exports at 840 × 1458; a MacBook at default padding exports at 1840 × 1240. The actual dimensions appear in the size readout below the live preview before you export.

Why is there no Surface / Pixel / specific-model frame?

Specific-model frames quickly age out as manufacturers ship new iterations. The generic iPhone / Android / iPad / MacBook / Browser frames are designed to read as 'generic modern device' indefinitely, so a mockup you ship today still looks current in two years. Pick the form factor that matches your use case, not the brand badge.

Free Device Mockup Generator — iPhone, MacBook, iPad, Browser

A polished device mockup turns a flat screenshot into a marketing-ready hero asset. The same screenshot that looks awkward on its own becomes a product launch tweet, a landing page hero, a case study cover or an app-store preview once it's framed inside an iPhone, an iPad, a MacBook or a browser chrome. PikDraw's Mockup Generator builds those frames in the browser — vector-rendered, royalty-free, branded with your gradient and shadow choices, exported as a single PNG. No signup, no watermark, no licensed device-render fees.

What is the Device Mockup Generator?

The Mockup Generator is a focused canvas tool that wraps any uploaded screenshot in one of five device frames (iPhone, Android phone, iPad, MacBook, Browser Window), drops it onto a solid or gradient background with adjustable padding and shadow, and exports as a high-resolution PNG. Every device frame is drawn from scratch as vector shapes on the canvas — there are no licensed PNG overlays, so the exported file is fully yours for any commercial use.

Key features

Five device frames: iPhone, Android, iPad, MacBook, Browser Window
Three body colours: black, white, silver
Vector-drawn frames — fully royalty-free commercial use
Solid or linear-gradient background with two-colour control
Adjustable padding (0–300 px) for inline-screenshot vs hero-asset framing
Adjustable drop shadow (0–100) for subtle to dramatic lift
Cover-fit screenshot placement preserves your image's aspect inside the device screen
iPhone frame includes the modern dynamic-island camera cluster
Browser frame includes the macOS-style traffic-light buttons
100% client-side — your screenshot never leaves your browser
PNG export at full device resolution
No signup, no watermark, no daily limit, no premium tier

How it works

Each device frame is defined by a spec object: outer width and height, inner screen area (x, y, width, height) relative to the outer, body corner radius and inner screen corner radius. When you pick a device, the canvas is sized to the device's outer dimensions plus the padding on every side, then the background fills first (solid colour or linear gradient between your two chosen colours). The device body is drawn as a rounded rectangle with a drop shadow at your chosen blur and offset. The inner bezel (the dark frame around the screen) is drawn as a second slightly smaller rounded rectangle. The screen area itself is then clipped to its own rounded rectangle and the uploaded screenshot is cover-fit into that clip — scaled to fill, centred, with overflow cropped. Device-specific extras are layered on top: the iPhone gets a dynamic island drawn as a pill-shaped dark rectangle near the top of the screen; the Browser frame gets a top chrome bar with three traffic-light buttons in red, amber and green; the MacBook gets a small camera dot at the top centre of the lid. Export renders the canvas at the full device resolution (not the scaled-down preview) and serialises to a PNG blob via toBlob(). The blob downloads directly with a descriptive filename — mockup-DEVICE-TIMESTAMP.png — ready for any commercial use.

Why use this tool

Most mockup tools either watermark the export, charge a subscription, use licensed device PNGs you don't technically own, or upload your screenshot to a third-party server. PikDraw is none of those: every device frame is drawn from scratch as vector canvas shapes, every export is royalty-free for commercial use, every feature is free, and your screenshot never leaves your browser. The tool is intentionally focused — pick a device, drop a screenshot, pick a background, export.

Common use cases

Landing page hero mockups for product launches
App Store and Google Play screenshot frames
Product Hunt launch images framed in iPhone or MacBook
Case study cover images for agency portfolios
Social media product announcement posts (Twitter / X, LinkedIn, Threads)
Tutorial blog headers showing the final result framed in a browser window
Pitch deck slides showing app or product screenshots professionally framed
Email campaign hero images for product update announcements

How to use this tool

Upload a screenshot — Drop in any screenshot — iPhone, Android, iPad, MacBook or browser-window capture. The mockup generator fits the image into the chosen device's screen area at cover scale, so portrait screenshots land in portrait devices cleanly and desktop screenshots fit landscape devices naturally.
Pick a device — Choose iPhone (rounded full-bezel modern frame with dynamic island), Android (similar but with squarer corners), iPad (tablet aspect), MacBook (laptop lid framing), or Browser Window (chrome with traffic-light buttons). Each frame is drawn as vector shapes on the canvas — no licensed PNG overlays, no royalty issues.
Choose a body colour — Black, white or silver. Black is the dominant 2026 look for product marketing; white reads as premium / Apple-aesthetic; silver works well on dark gradient backgrounds.
Set the background — Pick a solid colour, or enable the gradient toggle and choose two colours for a smooth linear blend. Gradient backgrounds are the modern landing-page hero default — bright cyan-to-violet for SaaS, deep navy-to-black for premium tools, peach-to-coral for consumer apps.
Tune padding and shadow — Padding (0–300 px) controls the breathing room around the device. Shadow (0–100) controls how dramatically the device lifts off the background. Subtle shadows (10–25) read as professional; dramatic shadows (50–80) read as marketing hero.
Export as PNG — Hit Download PNG. The full mockup renders at the device's native resolution and saves to your downloads folder. Drop it straight into your landing page hero, product launch tweet, or app store screenshot.

Who should use this

Product marketers building landing page hero mockups, indie hackers launching on Product Hunt or social, app developers building App Store / Play Store screenshot sets, agencies producing case study cover images, designers framing portfolio shots, content creators producing tutorial blog headers, and founders building pitch deck product slides without paying for a Mockup-as-a-Service tool.

How to get started

Capture or paste a screenshot, upload it, pick iPhone for mobile apps or Browser for web apps, choose a black body with a dark gradient background, leave padding at 120 and shadow at 40, and hit Download PNG. The first export takes around two seconds.

Best practices

Match the device frame to your product surface — phone for mobile apps, browser for web apps, MacBook for desktop apps
Capture your screenshot at the device's native aspect ratio for the cleanest fit
Use 200+ px padding and 60+ shadow for full hero-asset framing; 60 px padding and 15 shadow for inline blog screenshots
Pair a dark device body with a dark gradient background for premium product look
Export PNG at full resolution and let your CMS downscale — preserves quality on retina displays
Reuse one background gradient across all your product mockups for a recognisable brand look

Pro tips

Use iPhone with black body and dark gradient background for premium product marketing.
Use Browser Window with white body and soft gradient for SaaS landing page hero shots.
Use MacBook with silver body and a brand-coloured solid background for case study covers.
Crank padding to 200+ px and shadow to 60+ for full hero-section mockups; drop padding to 60 and shadow to 15 for inline screenshots.
Export at the largest device resolution and let your CMS downscale — quality compounds the other way.

Expert insights

Match surface to frame

Web apps → Browser Window. Mobile apps → iPhone or Android. Desktop apps → MacBook. Mismatched framing reads as careless.

Hero vs inline

200+ px padding for landing-page heroes; 60 px padding for inline blog screenshots. Match the framing to the destination.

Vector-drawn = yours

Every device frame is drawn from scratch as canvas vector shapes — no licensed PNGs, no royalty restrictions on commercial use.

Limitations to be aware of

Single device per export — for multi-device hero shots combine separate exports with the Image Combiner
Five generic device frames — no specific model variants (intentional, so mockups don't age out as manufacturers refresh hardware)
Cover-fit screenshot placement — for pixel-perfect aspect alignment, capture at native device ratio first
No transparent background option — choose a solid colour or gradient to match your destination surface

Frequently asked questions

What devices does the mockup generator support?: Five device frames: iPhone (modern rounded bezel with dynamic island), Android phone (similar form factor with squarer corners), iPad (tablet aspect), MacBook (laptop lid framing), and Browser Window (web-app chrome with traffic-light buttons). Each frame is rendered as vector shapes on the canvas — no licensed PNG overlays, no royalty restrictions on commercial use.
Can I use these mockups commercially?: Yes. Every device frame is drawn from scratch as vector shapes on the canvas — there are no copyrighted device renders or photographed mockups under the hood. The exported PNG is yours to use in marketing, landing pages, social posts, paid ads, app store screenshots and any other commercial context.
What's the difference between iPhone and Android frames?: iPhone uses a deeply rounded body with the dynamic-island camera cluster at the top. Android uses similar proportions but with slightly squarer corner radius and no dynamic island. Both are designed to read as 'modern smartphone' instantly without locking you into a specific brand model.
Why does my screenshot look stretched / cropped?: Each device frame has a fixed aspect ratio for its screen area. A landscape screenshot dropped into a portrait phone is automatically cover-fit (scaled and centred to fill the screen, with overflow cropped). For best results, capture your screenshot at the device's native aspect ratio (portrait for phones, landscape for laptops, browser windows and tablets-in-landscape).
Can I add multiple devices in one mockup?: The current generator places one device per export. For multi-device hero shots (phone + laptop side by side), export each device separately, then combine them in PikDraw's Image Combiner or Collage Maker.
Does PikDraw upload my screenshot anywhere?: No. The whole generator runs in your browser using the HTML5 Canvas API. Your screenshot, the rendered mockup and the exported PNG never leave your device. There's no server round-trip, no telemetry, no signup, no watermark and no daily limit.
What size is the exported mockup?: Export size depends on the device and padding. An iPhone with default 120 px padding exports at 840 × 1458; a MacBook at default padding exports at 1840 × 1240. The actual dimensions appear in the size readout below the live preview before you export.
Why is there no Surface / Pixel / specific-model frame?: Specific-model frames quickly age out as manufacturers ship new iterations. The generic iPhone / Android / iPad / MacBook / Browser frames are designed to read as 'generic modern device' indefinitely, so a mockup you ship today still looks current in two years. Pick the form factor that matches your use case, not the brand badge.

Browse all PikDraw image tools →