Screenshot Frame

What it's for

Dress up a screenshot for a blog post, a slide or an app store listing: space round it, a background, rounded corners and a shadow, and if you like a plain browser window or phone body drawn round it.

For example, when a plain screenshot looks flat on your page, choose Browser window, a Gradient background and a shadow of 40, and save the PNG.

How to use it

Choose a screenshot (or drop or paste one). Frame is None, a Browser window (a bar with three coloured dots and an address pill, with no names or logos) or a Phone (a plain rounded body; it isn’t any particular device). Frame colour makes the bar and body light or dark. Padding is the space round the frame, and Rounded corners rounds the picture or window, both as a share of the picture’s width. Shadow is how strong the shadow under the frame is; 0 turns it off.

Background is a Gradient between two colours at an angle, One colour, The picture, blurred, or Transparent. Save as PNG saves it at the picture’s full size plus the padding and frame. The settings are remembered.

Example

Choose any screenshot, then set:

Frame: Browser window · Padding: 8 · Rounded corners: 1.5 · Shadow: 40 · Background: Gradient

The screenshot appears inside a window with a light bar and three dots, on a purple-to-pink background, with a soft shadow.

Good to know

The address pill in the browser frame is empty: the tool can’t show a web address. The phone is a simple shape and doesn’t match any real device, and a screenshot that already includes a phone’s status bar will show it inside the frame. A very large screenshot makes a large PNG, and a browser may refuse a canvas that big. The blurred background is a soft blur made by shrinking the picture, not a precise one. The picture doesn’t leave your browser.