Handitab

Screenshot Frame

Place a screenshot on a colored or gradient background with padding, rounded corners, a drop shadow, and an optional window title bar.

About Screenshot Frame

A screenshot frame presents a screen capture on a clean backdrop so it reads well in a blog post, slide, or changelog. This tool draws a diagonal gradient between two colors, places your screenshot in the middle with the padding you choose, clips it to rounded corners, and can add a soft drop shadow and a plain window title bar. The screenshot keeps its original pixel size, and the canvas grows around it, so text stays sharp.

Also known as: Screenshot Mockup.

How to use Screenshot Frame

  1. Choose an image, or drag it onto the upload area. The file is read by your browser and is not uploaded.
  2. Set "Padding", "Background color", "Second color" and "Corner radius", and the other options. The preview updates as you change them.
  3. Check the preview, then press "Download result" to save the file.

Questions about Screenshot Frame

How do I get a solid background instead of a gradient?

Set both color pickers to the same color. The gradient then has identical start and end stops, which produces a flat fill.

Runs in your browser. Page last updated .

More image tools

All 73 image tools
Sepia EffectApply a warm brown sepia tone to a photo for an old-print look, adjust how strong it is, and download the image as PNG, JPG, or WebP.Sharpen ImageSharpen a soft or slightly blurry image by boosting edge contrast with an adjustable strength, then download the crisper PNG, JPG, or WebP.Social Media Image ResizerResize and crop a photo to common social media sizes such as a square post, 9:16 story, 16:9 thumbnail, link preview, or profile header.SVG Blob GeneratorGenerate a random organic blob shape as SVG: set the number of points, irregularity, and fill color, then copy or download the code.SVG OptimizerShrink SVG code by removing comments, editor metadata, and extra whitespace and by rounding long decimals, then compare the size.SVG to CSS ConverterConvert SVG code into a CSS background-image with a URL-encoded data URI, so the graphic loads without a separate image file.