Drop in a screenshot and wrap it in a polished backdrop, rounded corners, a soft shadow, and an optional window frame. Free, no sign-up, and your image never leaves your browser.
Drop a screenshot or click to browse
PNG, JPG, or WebP. Up to 25 MB. Everything is composed in your browser.
100% in-browser. Your image is never uploaded to a server. The whole image is composed on your device.
Other free website tools to polish and ship faster.
Design social share images for your pages. Set title, background, and colors, then download a PNG.
Use Tool →Turn any image or emoji into a full set of favicon files for your website.
Use Tool →Build a harmonious color palette for your brand and copy the hex codes in one click.
Use Tool →Visually craft CSS box shadows with a live preview and copy the code instantly.
Use Tool →Style a button visually and copy clean, ready-to-paste CSS for your site.
Use Tool →Generate a custom QR code with your colors and logo. Download as PNG or SVG.
Use Tool →How It Works
No account, no sign-up, completely free. Every step runs in your browser, so your screenshot is never uploaded to any server.
Drop a PNG, JPG, or WebP up to 25 MB. Any capture works, from a full window to a cropped detail.
Choose a gradient, solid, or transparent background, then tune padding, corners, shadow, and a window frame.
Keep the original shape or letterbox into 16:9, 1:1, or 4:3, then export a polished PNG with one click.
Why It Matters
A raw screenshot reads as a quick grab. The same capture with padding, a considered background, soft corners, and a gentle shadow reads as a designed graphic, and designed graphics are the ones people stop on, trust, and pass along.
background → padding → shadow → rounded screenshot → frame
The background fills the frame, the padding gives the image room to breathe, a soft shadow lifts it off the backdrop, and the window frame signals this is a real screen. Stacked together, those small touches are what make a capture look finished.
The effect matters most in places where first impressions are quick. In a social feed, a framed screenshot on a bold gradient stands out from flat text posts. On a landing page, a clean backdrop that echoes your brand colors makes a product shot feel intentional rather than pasted in.
It also helps in calmer contexts. In documentation, tight padding and a light or transparent background keep the reader focused on the interface while still giving the image a defined edge, so it never looks like it fell into the page by accident.
Sizes by Channel
The tool exports at the resolution it composes, so start from a crisp source and pick the output aspect for where the image is headed. These are the common targets.
| Channel | Typical size | Best for |
|---|---|---|
| Twitter / X post | 1600 × 900 | A 16:9 framed screenshot with a gradient background reads well in the timeline Great fit |
| LinkedIn share | 1200 × 627 | A clean solid backdrop and window frame keep it professional in a feed Great fit |
| Blog / in-article | 1200 × 675 | Rounded corners and light padding so the image sits naturally in the copy Great fit |
| Docs / knowledge base | 1280 × 720 | Tight padding, transparent or light background, focus on the interface Also works |
| App Store screenshot | 1290 × 2796 | Tall vertical frame with a branded gradient behind the app UI Also works |
Sizes reflect common 2026 platform recommendations.
Background Styles
Where the screenshot will live decides how loud the backdrop should be. Here is a starting point for the most common places you will post one.
| Use case | Suggested style | Why it works |
|---|---|---|
| Social feed post | Bold gradient, generous padding | A vivid backdrop makes the screenshot stand out in a fast-scrolling feed |
| Documentation | Light solid or transparent, tight padding | Keeps attention on the interface and blends into the page background |
| Product landing page | Soft brand gradient, medium padding | Ties the screenshot to your brand colors without overpowering the UI |
| Dark-mode site | Dark solid, soft shadow | Sits comfortably on dark layouts and lets a subtle shadow lift the image |
| Slide deck | Solid matching your template, plain frame | Stays consistent with slide styling and reads clearly on a projector |
| Portfolio or case study | Transparent, macOS frame | Drops onto any layout and signals it is a real product screen |
Troubleshooting
Almost every disappointing result comes down to one of these six. Most are quick fixes with the sliders and chips.
When the screenshot fills the whole frame edge to edge, the polish disappears. A little breathing room around the image is what makes it read as designed rather than pasted in.
Give it room to breatheA loud gradient behind a busy interface fights for attention. Pick a backdrop that complements the dominant colors in the screenshot instead of competing with them.
Complement, do not competeA heavy, dark shadow looks dated and muddy. A soft, subtle shadow lifts the screenshot off the background just enough to suggest depth.
Keep shadows softA tall image squeezed into a wide social card gets cropped or shrunk. Match the output aspect to where the image is headed so nothing important is cut.
Match the destinationA small or blurry capture only looks worse once it is scaled and framed. Start from a crisp, high-resolution screenshot so the export stays sharp.
Start crisp, stay crispA dense dashboard shrunk into a small card turns the text into noise. Crop to the part that matters, or size the output so the key text stays legible.
Keep key text legibleBest Practices
All CommonNinja widgets mentioned below are free to start. Apply these while you design and after you post.
01
Pull a gradient or solid color that echoes the dominant tones in your interface. A backdrop that feels related to the image looks intentional, not random.
02
More padding feels calm and premium and suits social posts. Less padding feels dense and technical and suits documentation. Adjust to the context.
03
A soft, low-strength shadow adds just enough depth to separate the screenshot from the background. Dial it back until it reads as a gentle lift.
04
A macOS-style bar or a plain border tells the viewer at a glance that this is a screen capture. It frames the content and adds a finished feel.
05
Pick the output aspect for the destination first, then position the screenshot. A social card, a square post, and a docs image all want different shapes.
06
Post the polished screenshot where people already follow you, then embed your feed on your site so visitors trace it back to the source.
Add Instagram Feed free →07
A great graphic only spreads if sharing is one tap. Add share buttons to the pages your screenshots live on so readers can pass them along.
Add Share Buttons free →08
Reuse the same background, padding, and frame across a set of screenshots so a series reads as one brand. Bring that same feed onto your own site.
Add Instagram Feed free →Glossary
Six terms that come up whenever you frame a screenshot. Bookmark this if you make these images for a team.
From the Blog
More from the CommonNinja blog. Free, no sign-up, just practical posts on creating content that grows your audience.
In this article, we are going to explain how to create effective landing pages.
Read article →In this article, we are going to explain how to reflect your brand identity in your website design.
Read article →In this article, we are going to explain how to create a Real Estate website.
Read article →In this comprehensive guide, we will delve into the intricacies of effective website navigation.
Read article →In this article, we are going to explain how to create a Photography website.
Read article →In this article, we are going to discuss incentives, and learn how to use them to boost engagement on your website.
Read article →