TodayTools

Screenshot mockup

Put screenshots in phone, laptop and browser frames on a styled background.

PrivateNo uploadsRuns in your browser

Donate

Preview: iPhone on gradient background, Square post

PrivateNo uploadsRuns in your browser

Need a whole web page in one picture? Take a full page screenshot

How to make a screenshot mockup

  1. Add your screenshots

    Drop them on the page, paste with Ctrl+V or tap Add your screenshots. You can add many at once.

  2. Pick a look

    Tap one of the ready looks, or change the frame, background, angle and shadow from the bar above the preview.

  3. Add a heading if you like

    Open Words to put a heading and a short line above or below the device.

  4. Download

    Download the PNG, copy it to paste into a chat, or download every screenshot with the same look as one ZIP.

Good to know

  • Paste a screenshot straight from the clipboard with Ctrl+V. It replaces the sample screens.
  • Ctrl+C copies the finished picture, Ctrl+S downloads it, Ctrl+Z and Ctrl+Y undo and redo.
  • Add several screenshots and Download all gives each one the same look, in one ZIP.
  • iPhone store set and Android store set make five tall pictures at the store size, each with a new shade of the background.
  • See-through background makes a PNG that sits on any slide or page.
  • Your last look is kept in this browser for next time. Your screenshots are not kept.

Where people use it

  • Store pictures for an app

    Five tall pictures with one look and a heading on each, ready for the app store listing.

  • Show off a new website

    Put the home page in a browser window with your own address in the bar, for a post or a slide.

  • A product launch post

    Laptop and phone side by side on a soft background, sized for a square post or a story.

  • A neat picture for a pitch deck

    Drop a screenshot, pick the slide size and paste the finished picture straight into the deck.

  • A preview card for the link

    Turn the mockup into a link preview image with a title for sharing.

    OG image generator

Why this one

Every frame is drawn on your device, so it works offline, keeps your screenshots private and makes a whole store set in one tap.

  • The frame is picked from the screenshot shape.
  • Many screenshots, one look, one ZIP.
  • Turned, lying down and floating angles with soft shadows.
  • Nothing is uploaded; it all happens on your device.

What you can change

  • Phone, tablet, laptop, desktop, watch, browser or card
  • Gradient, soft blend, colour, blur or see-through
  • Angle, shadow, space and corners
  • Heading and a line under it
  • Square, story, slide or store size
  • PNG at 1x, 2x or 3x

People find this page by searching

  • screenshot mockup generator
  • phone mockup online
  • put screenshot in phone frame
  • app store screenshot maker
  • browser window mockup
  • laptop mockup online
  • device frame for screenshot
  • screenshot with background
  • 3d phone mockup
  • website screenshot mockup
Cite this tool
  • APA
    sdev.in. (n.d.). Screenshot mockup [Web tool]. https://www.sdev.in/tools/screenshot-mockup
  • MLA
    "Screenshot mockup." sdev.in, https://www.sdev.in/tools/screenshot-mockup.
  • Chicago
    sdev.in. "Screenshot mockup." https://www.sdev.in/tools/screenshot-mockup.
  • BibTeX
    @misc{sdev-screenshot-mockup,
  title = {Screenshot mockup},
  author = {{sdev.in}},
  howpublished = {\url{https://www.sdev.in/tools/screenshot-mockup}},
  note = {Web tool}
}

Questions people ask

Are my screenshots uploaded anywhere?

No. The frames, backgrounds and the PNG are all drawn in your browser. Your screenshots never leave this device, and the page keeps working with the internet off.

Which frame should I use?

Leave it on Pick for me. A tall phone screenshot gets a phone, a wide one a laptop or a browser window, a near square one a plain card, and a long scrolled web page a browser window.

How do I make store screenshots for my app?

Add up to five screenshots and tap iPhone store set or Android store set. Each one gets the same phone frame and background at the store size (1290 x 2796 for iPhone, 1080 x 1920 for Android, with tablet sizes for tablet screenshots), with its own heading. Download all of them as one ZIP.

Can I change the address in the browser frame?

Yes. Choose a browser frame and type any address in the box above the preview. It shows in the address bar of the picture.

How do I get a background with no colour?

Open Background and choose See-through. The PNG then has no background, so it sits cleanly on a slide, a document or a web page.

What do 1x, 2x and 3x mean?

They multiply the picture size. 1x is the size you chose, 2x doubles the width and height for sharp results on big screens and in print, and 3x triples them.

Donate