Overview
What this tool does
Turn a plain screenshot into a polished, presentation-ready image: a realistic browser or phone frame, a background (solid, gradient, or a blurred version of the shot itself), padding, rounded corners, and a soft drop shadow. Pick an export size and it's ready to drop straight into a portfolio, a case study, a pitch deck, or a social post — sized to the exact spec for Open Graph, X/Twitter Cards, Instagram, LinkedIn, or Dribbble. Everything runs on a canvas in your browser: upload your own screenshots, or capture some fresh ones with the Website Screenshot Tool and send them straight here. Style settings apply to every image you've imported, so "Download all" gives you a consistent, professional-looking set from one round of tweaking. Nothing is uploaded anywhere.
How to
Use it in 3 steps
- Upload one or more screenshots, or capture some with the Website Screenshot Tool and click "Send to Mockup Studio."
- Pick a frame: no frame, a light or dark browser window, a minimal address bar, or a phone bezel.
- Choose a background — solid color, gradient (with presets), a blurred version of the image itself, or transparent.
- Adjust padding, corner radius, and shadow to taste. The preview updates live.
- Pick an export size (Original, or a preset for OG/Twitter/Instagram/LinkedIn/Dribbble/custom) and download. Use "Download all" to export every imported image with the same style in one pass.
FAQ
Frequently asked questions
▶Do my screenshots get uploaded anywhere?
No. Everything is drawn on an HTML canvas in your browser and exported locally via canvas.toBlob(). Nothing leaves your device from this tool, whether you upload an image or bring one over from the Website Screenshot Tool.
▶What's the difference between the browser frame styles?
Light and Dark both show the classic three traffic-light dots and a fake address bar, just in different color schemes. Minimal drops the traffic lights and keeps just the address bar for a cleaner look. Device · Phone wraps the image in a rounded bezel with a top notch and bottom home indicator instead of browser chrome.
▶Can I set a fake URL in the address bar?
Yes — type anything into the address bar field once a browser frame is selected. It's just text, so it can say your real domain, a placeholder, or anything else.
▶What does "Original" size do versus the presets?
Original sizes the canvas to exactly fit your image plus the padding and frame you've chosen, at full resolution. The presets fix the canvas to a specific size (e.g. 1200x630 for Open Graph) and fit your framed image inside it, centered.
▶I have several screenshots imported — can I style them differently?
The style controls apply to whichever image is active in the thumbnail strip, and "Download all" exports every image using the CURRENT style settings — so it's built for applying one consistent look across a set, not styling each one separately. Export the ones that need a different look on their own.