How to beautify a screenshot
- Drop your screenshot on the box, press Enter on it to browse, or paste a copied screenshot with Ctrl+V. A sample dashboard is loaded so you can see the result immediately.
- Under Background pick Gradient, Solid or None, then a preset or your own Start color, End color and Gradient angle.
- Set Padding, Corner radius, Shadow, Frame (None, Browser or Phone) and Canvas shape.
- Click Download PNG or Copy image. Reset style restores the defaults.
How it works
Everything is drawn on an HTML canvas in your browser. The gradient follows the CSS rule: the gradient line is centered on the canvas and has length |width x sin(angle)| + |height x cos(angle)|, so 135 degrees runs from the top left corner to the bottom right whatever the shape (CSS Images Level 3). The framed screenshot is drawn on its own layer and then placed on the background with a canvas shadow (shadowBlur), because a clipping path would otherwise cut the shadow off. That also gives transparent PNG screenshots a correctly shaped shadow.
Worked example
With the defaults (Gradient Indigo at 135 degrees, Padding 48 px, Corner radius 12 px, Medium shadow, no frame, Fit the screenshot) the 1,200 x 750 sample becomes a 1,296 x 846 px PNG, because 1,200 + 2 x 48 = 1,296 and 750 + 2 x 48 = 846. It downloads as sample-screenshot-beautified.png. Choosing Browser adds a 40 px title bar and gives 1,296 x 886 px, Phone adds a 16 px bezel and gives 1,328 x 878 px, and Widescreen 16:9 widens the canvas to 1,504 x 846 px.
Choosing settings
Padding of 48 to 64 px, a corner radius of 8 to 16 px and a Medium shadow suit most posts and docs. Use Link preview 1.91:1 for the wide cards Facebook, LinkedIn and X show, and Square 1:1 for feeds. Pick a gradient close to your brand color, or Solid for a calm look. Crop away window clutter first with the image cropper.
Limits and edge cases
- Padding and corner radius are exact output pixels. The browser bar, bezel and shadow scale with the screenshot, so they look the same on a 600 px or a 2,400 px capture.
- Output is capped at 16,777,216 pixels (4,096 x 4,096), the canvas limit on iOS. Bigger results are scaled down and the line above the preview says by how much. Sources over 100 million pixels are refused.
- Animated GIFs use their first frame. HEIC screenshots are not supported by most browsers, so convert them with the HEIC to JPG converter. If the PNG is large, shrink it with the image compressor.
Screenshot beautifier FAQ
How do I add a background to a screenshot?
Load the screenshot, choose a Gradient preset or a Solid color under Background, adjust Padding, and click Download PNG. The padding is the visible border of background around your screenshot.
How do I put a screenshot inside a browser window?
Set Frame to Browser. The tool adds a light title bar with three colored dots and an address pill above your image. Use Phone instead for mobile screenshots, which adds a dark bezel and camera slot.
Can I make the background transparent?
Yes. Choose None under Background. The PNG keeps its transparency, the preview shows a checkerboard, and the shadow is still drawn around the screenshot.
What canvas shape should I use for social media?
Link preview 1.91:1 matches the wide cards Facebook, LinkedIn and X show for shared links, and Square 1:1 suits most feeds. The tool centers your screenshot and extends the background to reach the ratio.
Why was my downloaded image scaled down?
iOS devices limit a canvas to 4,096 x 4,096 pixels (16.7 million), and an oversized canvas stops working. When screenshot plus padding passes that, the tool shrinks the whole image proportionally and tells you the percentage.
Sources: W3C CSS Images Level 3, linear gradients; MDN, shadowBlur; MDN, canvas element.