Sifency Tools
Let’s Talk

Social media mockup generator

Posts that show a product in use get more attention than a bare logo. Place a screen inside a phone, add a colourful background, and export it at a vertical story size or a square feed size without opening a design tool. Nothing is uploaded: the picture is drawn in your browser.

Studio

Your screenshot appears here

Drop, paste or browse for a screenshot, or try an example.

Drop a screenshot here

Or paste one with Ctrl+V. PNG, JPG, WebP, GIF, AVIF or BMP, up to 25 MB.

Phone frame · no screenshot yet

Export

Saves as mockup-phone-1080x1920.png · 1080 × 1920 px · PNG · 1x

Copy image always copies a PNG at the chosen scale.

Add a screenshot to enable Download and Copy image.

More mockup ideas

How it works

  1. Add a screenshot

    Drop, paste or browse for a screenshot of your design (PNG, JPG, WebP, GIF, AVIF or BMP), or start with an example. Your own browser reads it and nothing is uploaded.

  2. Choose a device and a background

    Pick a phone, tablet, laptop, browser window or monitor, then set a solid, gradient, mesh or transparent background, the padding, the corner radius, the shadow, the bezel colour and, if you like, a second device.

  3. Pick a size

    Use a ready-made size for a marketplace preview, a Product Hunt gallery, Dribbble, Behance or a social post, or type your own width and height.

  4. Download or copy

    Save the mockup as a PNG or WebP at normal or double size, or copy it straight to your clipboard to paste into a chat or a document.

Questions about a social media mockup

How do I make a social media mockup?

Drop, paste or browse for a screenshot, or try the example. The phone frame is drawn around it at once. Then open Size and choose Story (1080 × 1920 px), and change the background, padding and shadow as you like. Rotate the phone a few degrees and move it slightly off centre for a lively, hand-placed look. A straight frame feels more formal and calm.

Will the picture look right on every platform?

Each platform crops slightly differently, so keep the device away from the outer 10 percent of the picture. The size list uses the common vertical and square sizes, which are safe starting points for most feeds.

Which image size should I use for a social media mockup?

A vertical story size fills a whole phone screen, so the frame can be large and centred, with the background colour reaching the edges. In the Size list choose Story, which is 1080 × 1920 px.

Is anything uploaded when I make a social media mockup?

No. Your screenshot is read and drawn into the phone frame by your own browser, so the picture behind your social media mockup never reaches a server, and Download and Copy image work on your device.

Next step

Fill the rest of the page with placeholders

A mockup often needs filler images around it. Make exact-size colour placeholders with proper file names, and download a whole set as one ZIP.

Make placeholder images
View all tools
Contrast CheckerCheck WCAG contrast and fix failing colours in one click.Open toolColour Placeholder GeneratorExact-size placeholder images in any colour, named for you.Open toolPalette from ImageDrop an image, get a palette you can paste into code.Open toolFavicon and App Icon GeneratorOne image in, every icon and the HTML snippet out.Open tool

About these tools

Small tools, made by Sifency

Sifency is a small studio that builds themes, plugins and web apps. These tools began as the things we kept needing ourselves, so we tidied them up and left them open for everyone. There is nothing to sign up for.