Device mockup
Drop a screenshot into a generic phone, tablet, or laptop frame.
Runs in this tab. The file stays here.
This runs in your browser. Nothing is uploaded.
About Device mockup
Places a screenshot into a generic phone, tablet, or laptop frame drawn in your browser and exports a PNG. No branded device silhouettes, no upload.
Portfolio shots often need a device chrome around a UI screenshot. Tracing a specific phone or laptop silhouette can raise trade-dress issues, so this tool uses simplified geometric frames: rounded phone, tablet, and laptop shapes that read as devices without copying a named model.
Drop a screenshot, pick a frame, optionally set a background colour behind the device, and export a PNG. The image is scaled to fit the screen cutout you selected. It will not invent missing UI chrome or reflect a real bezels camera notch catalog.
If you need photoreal marketing renders of a particular product, commission that elsewhere. This page is for honest, generic mockups that stay on-device.
Edge cases include screenshots with non-matching aspect ratios (letterboxing inside the screen cutout), very large source PNGs that stress memory before downscale, and UI with transparency that composites against the frame background colour you chose. Portrait versus landscape phone frames expect different screenshot shapes; swapping without recropping may leave bars. The export is a flat PNG, not a layered PSD.
Screenshots are decoded and drawn on a canvas in this tab. They are not uploaded to a mockup SaaS or a render farm. Unreleased app UI, client dashboards, and internal tools stay on your machine until you choose to share the downloaded PNG. That is the same privacy model as the rest of the image workbench on this site.
How to use Device mockup
- 1Choose a frame (phone portrait or landscape, tablet, or laptop).
- 2Drop a screenshot; adjust background colour if you want.
- 3Download the composited PNG.
What it won't do
- Generic frames only; no branded device silhouettes.
- Flat PNG export; no layered PSD or Figma handoff.
Common questions
Why aren’t these Apple or Samsung frames?
Exact product silhouettes can raise trade-dress concerns. Generic shapes keep the tool useful and safer.
Is my screenshot uploaded?
No. Compositing is canvas work in the tab.
Can I export transparent PNG?
The device sits on the background colour you pick. Use a flat colour that matches your site if you need a clean plate.
What screenshot size works best?
Match the frame orientation and aim for at least the screen cutout pixel size so text stays sharp. Oversized sources are scaled down; tiny sources will look soft.
Related tools
Why this one doesn't upload your file
There is no server to upload to. This page is a static file, and the work happens in your browser using the same graphics and WebAssembly code that renders every other site you visit. Your file is read from disk into memory, processed, and handed back as a download. Once the page has loaded you can disconnect from the network entirely and it keeps working. The longer explanation