How to use the screenshot mockup generator
- Add a screenshot. Drop in or paste a screenshot of a website or app. A sample is loaded first so you can try the settings.
- Choose a frame. A browser window suits websites, with your own address in the bar. The phone frame suits mobile apps and responsive designs; the screenshot fills the screen from the top.
- Style the background. Pick a gradient, a solid colour or a transparent background, and choose a size: fit to the screenshot, 16:9 for slides and video, square for Instagram, or 1200×630 for link previews.
- Download. Adjust the padding, shadow and rotation, then download a PNG at up to three times the resolution, or copy it straight to your clipboard.
Why frame screenshots?
A bare screenshot can blend into a white page or look unfinished in a social feed. A device frame tells people instantly what they’re looking at, a website or an app, and a background with depth makes the work look considered. It’s the quickest way to make portfolio pieces, launch posts and documentation look professional.
Getting a sharp result
Take your screenshot at the highest resolution you can, ideally on a high-density (Retina) screen, and export at 2× or 3×. Social platforms recompress images, so a larger, cleaner PNG survives better. Use the 1200×630 size for link previews and the meta tag generator to check how it appears.
Frequently asked questions
Is my screenshot uploaded?
No. The mockup is drawn on a canvas in your browser, and the image is never sent anywhere.
Can I make the background transparent?
Yes. Choose Transparent and download a PNG, ready to place on any background in a design tool or slide.
Why is my screenshot cropped in the phone frame?
Phone screens are tall, so wider screenshots are cropped to fit, keeping the top of the screen. Take a screenshot at a phone size for the best result.