v.0.7.1
Mockup Studio
Turn plain screenshots into polished images for social media, docs and landing pages.
Mockup Studio puts your screenshot on a background, adds a frame, shadow and tilt, and exports a ready-to-share image. Everything runs in your browser - your screenshots are never uploaded.
Creating a Mockup
- Open Mockup Studio
- Drop a screenshot onto the canvas or click to choose a file (PNG, JPEG or WebP, up to 15 MB)
- Style it with the controls on the right
- Click Export
Styling Options
- Aspect ratio - Auto, 16:9, 4:3, 1:1 or 9:16
- Padding - space between the screenshot and the edge
- Background - solid color, gradient, mesh, pattern, image or transparent
- Grain - subtle noise texture on the background
- Border - none, or a light / dark browser window frame
- Border radius - from sharp corners to pill-shaped
- Drop shadow - soft, floating or sharp presets, or fine-tune blur, offset and opacity
- Rotate / Tilt - rotation plus perspective for a 3D look
- Text - add headings or captions with your choice of font, size, color and shadow
Use Ctrl + Z / Ctrl + Shift + Z (or Cmd on macOS) to undo and redo.
Choosing an Aspect Ratio
| Ratio | Good for |
|---|---|
| 16:9 | X / Twitter, LinkedIn posts, YouTube thumbnails, slides |
| 4:3 | Blog posts, documentation |
| 1:1 | Instagram feed, LinkedIn |
| 9:16 | Stories, Reels, TikTok |
| Auto | Fits the screenshot plus padding |
Exporting
- PNG - lossless, supports transparency. Best default
- JPEG - smaller files, no transparency
- WebP - small files with good quality, ideal for websites
Export at 1x, 2x or 3x. Use 2x or higher for crisp results on high-resolution screens.
Tip: Pick a transparent background with PNG export to drop the mockup onto any design.
Presets
Found a style you like? Click Save preset to reuse it later. Presets store the styling only - not the screenshot.
Manage presets in My presets: apply, rename, duplicate or delete them. Saving presets requires an account.