Overview
What this tool does
Turn one or more plain screenshots into polished, presentation-ready images: a realistic browser or phone frame, a background (solid, gradient, radial, vignette, duotone, mesh, a pattern, your own image, or a blurred version of the shot itself), padding, rounded corners, a soft drop shadow, and an optional headline caption. Arrange several screenshots into one composed image: side by side, stacked, in a 2 or 3-column grid, one large hero shot with smaller ones below it, fanned out, or staggered in a diagonal cascade, or style them one at a time. 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 "Single image" to style one screenshot at a time, or "Grid layout" to arrange up to 4 of them into one composed image (side by side, stacked, a 2 or 3-column grid, a spotlight hero shot, a fan, or a staggered cascade).
- Pick a frame: no frame, a light or dark browser window, a minimal address bar, or a phone bezel.
- Choose a background: solid, gradient, radial, vignette, duotone, mesh, a pattern (dots, grid, diagonal lines, checkerboard, or noise), your own uploaded image, a blurred version of the shot, or transparent. "Smart" swatches pick colors straight from your screenshot.
- Add an optional headline caption above or below the image, with its own position, alignment, size, and color.
- 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, upload a background image, or bring a screenshot 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, frame, and caption you've chosen, at full resolution. The presets fix the canvas to a specific size (e.g. 1200x630 for Open Graph) and fit everything inside it, centered. For a very large source image (a full-page capture, for instance), Original automatically scales the whole composition down to stay within your browser's canvas size limit. You'll see a small note if that happens, and the result stays crisp.
▶What does "Grid layout" do?
It composes up to 4 of your imported screenshots into ONE image instead of styling them one at a time. Side by side and Stacked line them up in a row or column; Grid (2-col) and Grid (3-col) arrange them in an even grid; Spotlight puts your first image large up top with the rest in a row below it; Fan overlaps them at a gentle angle; Staggered cascades them diagonally with no rotation, for a calmer, aligned look than Fan. Every image in the arrangement shares the same frame, background, and caption as the rest of your styling.
▶What's the difference between Radial, Vignette, and Duotone?
Radial is a gradient that radiates from the center outward instead of across a straight line. Vignette keeps a flat background color with a soft darkened falloff toward the edges, like a spotlight frame. Duotone desaturates your screenshot itself and tints its light and dark areas with your two chosen colors, the classic two-tone poster look; pick two contrasting colors for the clearest effect.
▶How does the "Smart" background work?
When you're in Solid or Gradient mode, the tool samples your active screenshot's most common colors and offers them as one-click swatches, so the background can match the image itself without any manual color picking.
▶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 as a single .zip file, 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. (This applies to Single image mode; Grid layout always composes your selected images together into one result.)