Free tool
Browser mockup generator
Put any screenshot in a browser window on a studio background, with rounded corners and a soft shadow. Free, no sign-up, and your image never leaves your device.
Loading the sample…
Drop or paste a screenshot (Ctrl+V or ⌘V), or choose one.
Slides, docs, help-center articles and blog posts
Your screenshot never leaves this device: your browser draws the picture, and nothing is uploaded.
How to make a browser mockup from a screenshot
- 1
Add your screenshot
Drop it anywhere on this page, paste it with Ctrl+V or ⌘V, or choose a file. Until you do, a sample shows how it works.
- 2
Choose a background
One of 9 studio gradients (the ones SayScreen renders behind its tutorial videos) or a solid color, such as your brand color or plain white for docs.
- 3
Frame it
A browser window with the address you type, a minimal title bar, or no frame at all. Then set the padding, the corner radius and the shadow.
- 4
Export
Pick a size and download a PNG (at 2× for sharp text on high-density screens) or copy it and paste it straight into a doc, a chat or a post.
Sizes
Pick the size for where it's going
Every size exports at 1× or 2×. 2× doubles the pixels in each direction, which keeps text sharp on high-density screens and when people zoom in. Use 1× when a platform asks for an exact size, such as 1200 × 630 for link previews, or when a large PNG is over an upload limit.
| Size | 1× | Best for |
|---|---|---|
| 16:9 | 1920 × 1080 | Slides, docs, help-center articles and blog posts |
| 1:1 | 1080 × 1080 | Square posts on LinkedIn, Instagram and X |
| 4:5 | 1080 × 1350 | Portrait posts that fill more of a phone screen on Instagram and LinkedIn |
| 1200×630 | 1200 × 630 | Link previews (Open Graph) on LinkedIn, Facebook, X and Slack, and blog covers |
Tips for screenshots people actually read
The background makes a screenshot look finished; what's inside it decides whether it gets read.
Crop to the point
Show the panel, dialog or chart you're talking about, not the whole desktop. A tight crop stays readable when a feed shrinks the image to the width of a phone.
Capture at high resolution
Retina Macs capture at 2× by default. On Windows, set display scaling to 200% before you capture, so the screenshot stays sharp in a 2× export.
Clean up before you capture
Use realistic sample data, close notifications, hide the bookmarks bar, and keep anything personal out of the shot: names, email addresses, API keys, customer data.
Match the frame to the screenshot
A browser frame for web apps, with your product's real address in the bar; minimal for desktop apps; none for phone screenshots and cropped components. Dark UI looks best with the dark title bar.
Keep one style across a set
The same background, padding and size on every image in a doc, launch post or carousel makes them read as one series. Your settings stay put while you swap screenshots.
Write alt text
When you publish, describe what the screenshot shows and why it matters. Screen-reader users depend on it, and search engines read it too.
Same looks as the videos
When a screenshot isn't enough, make it a video
These backgrounds aren't stock gradients. They're the 9 studio looks SayScreen renders behind every tutorial video, painted here with the same algorithm, so your screenshots and your videos match.
SayScreen turns one sentence into a narrated tutorial: the AI drives a real browser through your app, a lifelike voice narrates the script, and the recording gets the same window and background, plus smooth zooms, a gliding cursor and captions.
- Aurora
- Sunset
- Ocean
- Candy
- Mint
- Peach
- Midnight
- Graphite
- Daylight
Frequently asked questions
A screenshot of a website or web app shown inside a browser window: a title bar with the three window buttons and an address bar, usually on a background with some space around it. The frame tells people at a glance that they're looking at a website, and it makes a plain screenshot look finished in slides, docs, launch posts and app-store style images.
Yes. There's no sign-up, no limit and no watermark, and the images you make are yours to use anywhere, including commercial work.
Yes. Under Window frame, choose Minimal for just a title bar with the three window buttons, or None for the screenshot alone. The background, padding, rounded corners and shadow still apply, which makes it a quick screenshot beautifier for app screens, phone screenshots and cropped UI.
No. Your browser decodes the image and draws the result on your own device, so the screenshot is never sent to SayScreen or anyone else. Once the page has loaded, the tool keeps working even if you go offline.
Anything your browser can open: PNG, JPEG, WebP, AVIF, GIF (the first frame), BMP and SVG in every current browser, and HEIC in Safari. The result is always a PNG, so text and UI edges stay crisp.
Copy the screenshot to your clipboard, then press Ctrl+V (Windows, Linux) or ⌘V (Mac) anywhere on this page. On Windows, Win+Shift+S captures an area straight to the clipboard; on a Mac, Control+Shift+⌘+4 does the same.
Twice the pixels in each direction: a 16:9 image is 3840 × 2160 instead of 1920 × 1080. It keeps text sharp on high-density (Retina) screens and when people zoom in. Use 1× when you need an exact size, such as 1200 × 630 for a link preview, or a smaller file.
The screenshot is smaller than the space it fills, so it gets stretched (a 1280-pixel-wide screenshot in a 2× export, for example). The tool tells you when that happens. Export at 1×, or capture the screenshot at a higher resolution: Retina Macs do this by default, and on Windows you can set display scaling to 200% before you capture.
Yes. Copy image puts the finished PNG on your clipboard in current versions of Chrome, Edge, Safari and Firefox, ready to paste into a chat, a doc, a design file or a post.
Yes. Choose a screenshot from your photos, adjust it (the preview stays on screen while you scroll through the settings), then download or copy the result.
Yes. The nine backgrounds use the same colors and are painted with the same algorithm as SayScreen's video renderer, so your screenshots match your tutorial videos.
Something missing or not working? hey@sayscreen.com
Turn your screenshots into tutorial videos.
Point SayScreen at your app, say what to teach, and get a narrated, edited video back.
$1 for 7 days, then $29/month · Cancel anytime