Screenshot Mockup
Place screenshots inside phone, laptop, or tablet frames online for free. Perfect for app store listings, portfolios, and presentations. No signup.
Runs entirely in your browser — files never uploaded
Drag & drop a file here, or click to browse
JPG, PNG, WebP · up to 25 MB
How to use Screenshot Mockup
- 1. Upload a screenshot. Drag and drop or click to upload a JPG, PNG, or WebP screenshot of your app or website.
- 2. Pick a device. Choose from iPhone, Android Phone, iPad, MacBook, or Browser Window to frame your screenshot.
- 3. Download the mockup. Hit Download to get a PNG with your screenshot placed inside the device frame.
FAQ
Will my screenshot be cropped or distorted?
No. The screenshot is scaled to fit the device screen area while preserving its aspect ratio. Letterboxing fills any extra space with the device background color.
Are my images uploaded anywhere?
No. The mockup is rendered entirely in your browser using the Canvas API. Nothing leaves your device.
What resolution is the output?
The output matches the device frame dimensions (e.g. ~430×932 for iPhone, ~1500×960 for MacBook). Your screenshot is scaled to fit.
Can I use this for App Store screenshots?
Yes! These frames are great for app store listings, portfolios, pitch decks, and social media posts.
Can I customize the frame color?
The current version uses preset device colors (black for phones, gray for laptops). Custom colors are on the roadmap.
Related tools
- Color PickerPick any color from an image and get its HEX, RGB, and HSL code online for free. Click any pixel to grab the exact color. No signup.
- Favicon GeneratorGenerate all favicon sizes (16x16, 32x32, 180x180, 512x512) from one image online for free. Download as a ZIP. No signup.
- Color ConverterConvert colors between HEX, RGB, HSL, and CMYK online for free. Live preview with all formats at once. No signup.
- CSS GradientCreate beautiful CSS gradients with live preview online for free. Linear and radial gradients. Copy CSS code in one click. No signup.
- Box ShadowCreate CSS box shadows with a visual editor online for free. Adjust offset, blur, spread, color, and inset. Copy CSS in one click. No signup.
- Border RadiusCreate CSS border-radius with per-corner control online for free. Visual editor with live preview. Copy CSS in one click. No signup.