FIRST CH TOOLS LOCAL PROCESSING — your images never leave this device 日本語

FIRST CH TOOLS / Images / 64 SCREENSHOT FRAME

Screenshot Frame & Background Maker

Put a background, padding, rounded corners, a shadow and a browser-style frame around a screenshot and get a PNG that is ready for a blog post, a social feed or a slide deck. Screenshots can be dropped, chosen or pasted with Cmd+V / Ctrl+V. Everything happens inside your own browser.

Drag & drop a screenshot here or click to choose a file / paste with Cmd+V or Ctrl+V (PNG / JPEG / WebP / GIF)

Background

Shape

Export

How to Use

  1. Add a screenshotDrag and drop it, click to choose a file, or paste one you just took with Cmd+V / Ctrl+V. A sample image is loaded to start with.
  2. Style itPick a background swatch, then adjust padding, corner radius, shadow and frame with the controls. If you know where it is going, set the canvas ratio (16:9, 1:1 and so on) too.
  3. Export"Save PNG" downloads the file and "Copy image" puts it on the clipboard, ready to paste into Slack, X or Google Slides.

About This Tool

Drop a raw screenshot into an article or a post and a white page melts into the white background around it — nobody can tell where the screen ends. A margin, a background, rounded corners and a soft shadow are enough to make it read as "this is a screen". This tool does that finishing touch in the browser, without opening an image editor. The browser frame draws the traffic-light buttons and an address bar on top; the address text can be anything, or left empty when you would rather not show a URL.

Padding, radius and shadow are measured in the pixels of the original screenshot. A screenshot taken on a Retina display has twice as many pixels as it looks, so the same 64px padding looks thinner — widen it, or export at 0.5x, which also makes the file smaller. With a fixed canvas ratio, the padding becomes a minimum: the background grows only in the direction that is short and the screenshot stays centred. "Transparent" leaves the background unpainted, so you can lay just the shadowed screen over a slide.

Drawing happens on a browser Canvas and the image is never uploaded to a server. To crop to each platform's required sizes use the Social Media Image Resizer, to shrink the exported PNG use the WebP Converter, and to strip camera data use the EXIF Viewer & Remover.

Settings can also be passed as URL parameters (the image itself is always chosen locally). For example /en/screenshot-frame/?bg=gradient&c1=%231f2a44&c2=%234b6cb7&pad=96&radius=16&shadow=60&frame=browser-dark&url=example.com&ratio=16:9 (bg=gradient,solid,none / c1, c2=colours / angle=degrees / pad, radius=px / shadow=0–100 / frame=none,browser,browser-dark,window,window-dark / ratio=auto,16:9,1.91:1,4:3,1:1,4:5,9:16 / scale=0.5,1,2).

Other Tools