A mockup generator places your screenshots inside device frames for presentations, landing pages, and App Store previews. Upload a screenshot, choose a device, and download a professional mockup in seconds.
Your Screenshot
Drop screenshot here or click to upload
PNG, JPG, WebP supported
Device
Background
Preview
Preview is scaled. Download for full resolution.
How to Create a Device Mockup
A mockup generator turns a flat screenshot into a professional visual by placing it inside a realistic device frame. App Store previews, landing pages, pitch decks, and portfolio pieces all benefit from properly framed mockups.
Step 1: Upload Your Screenshot
Drag and drop your screenshot into the upload area, click to browse files, or paste a URL to load an image from the web. Best results come from screenshots that match the device's native resolution — iPhone screenshots at 375×812 or 2x (750×1624) scale correctly inside the iPhone frame.
Step 2: Choose a Device
Select from six device frames: iPhone (portrait, notch-style design), MacBook (open laptop with screen), iPad (portrait tablet), Android Phone (rectangular with minimal bezels), Desktop Monitor (wide format display), or Browser Window (Chrome-style with URL bar). The device frame is drawn programmatically using HTML Canvas — no image assets required.
Step 3: Customize Color and Background
Choose the device color variant (Space Gray, Silver, or Gold for phones/tablets). Set the background to transparent for maximum flexibility when placing in slides or design tools, solid color for a clean flat look, or gradient for a modern presentation feel. Toggle the drop shadow for depth.
Step 4: Download
Click "Download PNG" to get the final mockup. PNG preserves transparency if you chose no background, making it easy to composite over any slide or design. The canvas resolution is 2x for sharp output on retina displays.
FAQ
Is the mockup generator free?
Yes, completely free with no account or signup needed. Generate and download mockup images for any project.
What device frames are available?
Six frames: iPhone (375×812), MacBook (1280×800), iPad (768×1024), Android Phone (360×780), Desktop Monitor (1920×1080), and Browser Window with a URL bar. More devices are available via the selector.
How do I add my screenshot?
Click the upload area or drag and drop an image file. You can also paste a URL to load a screenshot from the web. The image is scaled to fit the device's screen area automatically.
Can I change the device color?
Yes. Phone and tablet frames support Space Gray, Silver, and Gold color variants. Laptop and monitor frames support Dark and Light themes. Select the variant from the dropdown after choosing a device.
What export formats are available?
PNG download via the canvas. PNG preserves transparency if you choose a transparent background. SVG export is also available which embeds your screenshot inside the vector device frame.
Can I add a shadow behind the device?
Yes. Toggle the drop shadow option to add a soft shadow behind the device frame. Useful for presentation slides and landing pages.
What background options are available?
Transparent (no background — great for placing over any background), solid color (choose any hex), or gradient (choose two colors for a linear gradient background).