Social Preview Generator
Create beautiful social media preview images with laptop mockups.
Upload a screenshot
Take a screenshot of your website and upload it here
Preview
Upload a screenshot to preview
Output: 1200 × 675px
Choose Background
Tips for great social previews
- • Use high-resolution screenshots (at least 1200px wide)
- • The MacBook frame works best with landscape screenshots
- • Twitter/X and LinkedIn use 1200×630 or similar for link previews
- • Use contrasting backgrounds to make your screenshot stand out
About this tool
Generate stunning social media preview images by placing your website screenshots in a sleek MacBook-style laptop frame. Choose from beautiful gradient backgrounds, select the perfect size for Twitter, LinkedIn, Facebook, and more. Export as high-quality PNG for your social sharing needs.
Features
- Create social media preview images with laptop mockups
- Choose from beautiful gradient backgrounds
- Select preset sizes for Twitter, LinkedIn, and Facebook
- Export as high-quality PNG images
How to Use
- Upload a screenshot of your website or app
- Select a background style and size preset
- Preview the mockup with your screenshot
- Export and download the image for social media
Frequently Asked Questions
What image size should I export for each platform?
Twitter/X: 1200×675 (16:9). LinkedIn: 1200×627. Facebook: 1200×630. Instagram feed: 1080×1080 (1:1) or 1080×1350 (4:5). The tool includes presets for all of these. Most platforms downscale gracefully, so 1200×630 is a safe universal size.
Do I need a laptop mockup, or does a plain screenshot work?
Plain screenshots work but blend into noisy feeds. Mockups add visual context (this is a website, not just a photo) and make the preview feel intentional rather than improvised. For product launches and portfolio shares, mockups convert better; for quick announcements, a plain screenshot is fine.
Can I use my own background image?
The current version ships gradient presets. For brand-consistent backgrounds (textured, photographic, or branded colour blocks), import your exported image into a design tool like Figma and add it there. Gradients cover 80% of the need; bespoke backgrounds belong in a design workflow.
Where does my screenshot go after I upload it?
Nowhere — the image stays in your browser and is never uploaded. The preview, the mockup composition, and the exported PNG all happen client-side via the Canvas API. Useful for unreleased product screenshots that shouldn't leak to a third party.
Why does my PNG look pixelated on Retina displays?
You're exporting at 1× resolution for a 2× display. For crisp rendering on modern laptops and phones, export at 2× — a 1200×630 canvas exports as 2400×1260. The extra pixels cost nothing to the user (modern connections swallow it) and look correct everywhere.