Add beautiful backgrounds, shadows, and frames to screenshots. Perfect for presentations and social media.
Turn plain screenshots into polished visuals with device frames, backgrounds, and shadows. Drop in a screenshot, wrap it in a MacBook, iPhone, or browser frame, add a gradient background, and download something presentation-ready.
Initializing in your browser…
Remove backgrounds from images with smart edge detection. Supports color picker, corner detection, and preset colors with adjustable tolerance.
Generate placeholder images for mockups, wireframes, and development. Custom dimensions, colors, text. Presets for social media, avatars, web. Export as PNG, JPG, or SVG.
Extract text from images using advanced OCR. Supports 18+ languages, page segmentation modes, confidence scores, and multi-format export.
A plain UI screenshot looks unpolished in a launch tweet and needs a gradient backdrop and window frame.
Input
app.png · gradient background · macOS window + shadow · padding 64
Output
A polished, social-ready composite around the screenshot
Padding, a rounded window chrome, shadow, and a backdrop give a raw capture the produced look that performs better on social and in decks, without opening a design tool. Presets match common aspect ratios.
Turn plain screenshots into polished visuals with device frames, backgrounds, and shadows. Drop in a screenshot, wrap it in a MacBook, iPhone, or browser frame, add a gradient background, and download something presentation-ready.
Showcase app screenshots in device frames for landing pages and app store listings.
Create eye-catching header images from plain screenshots.
Frame feature screenshots for polished product announcements.
Upload a 1280x800 screenshot, pick the Ocean gradient, keep 64px padding, set radius 16 and shadow 40, and choose the Browser frame. The export is a 1408x928 PNG with a #1f2937 title bar and traffic-light dots, suitable as a social/OG preview.
Choose the White or Black solid preset (or a custom hex), set the device frame to None, and lower the shadow toward 0 for a flat documentation thumbnail with just padding and rounded corners.
Screenshot Beautifier composites your image onto a larger HTML canvas with even padding, a soft drop shadow, and rounded corners, then exports the result as a PNG named screenshot-beautified.png. The output canvas is sized exactly to your image dimensions plus twice the padding value (imgWidth + padding*2 by imgHeight + padding*2), so a 1280x800 screenshot with the default 64px padding becomes a 1408x928 file. Padding is adjustable from 16 to 128px (step 8), the corner radius from 0 to 48px (step 4, drawn with quadraticCurveTo and a canvas clip so the screenshot is masked to the rounded shape), and the shadow blur from 0 to 100px (step 5). The shadow itself is fixed at rgba(0,0,0,0.3) with no horizontal offset and a vertical offset of one quarter of the blur value, which lifts the screenshot off the background. Everything runs in the browser via the 2D canvas API; no image is uploaded.
The background comes from eleven built-in presets plus a custom color picker. Eight are diagonal gradients with fixed names and palettes (Ocean #667eea to #764ba2, Sunset, Aurora, Forest, Fire, Night, Sky, Lavender) and three are solids (White #ffffff, Black #000000, Gray #374151). One honest caveat: the gradients are defined in CSS as linear-gradient(135deg, ...), but the canvas export extracts only the two hex stops via regex and redraws them with ctx.createLinearGradient(0, 0, width, height), a corner-to-corner diagonal. The live preview uses the real CSS gradient, so a wide or tall export can show a slightly different gradient angle than the preview. The Randomize button shuffles a preset and picks padding (32-111), radius (8-37), and shadow (20-79) at once, and a Share Config button encodes the current background, padding, radius, shadow, aspect ratio, and frame into the URL so a look can be reproduced.
The device-frame control lists None, Browser, macOS Window, iPhone, and Android, but be aware that the live preview and the exported PNG are not identical. In the export, only the Browser and macOS options actually draw chrome: a 32px-tall #1f2937 title bar with three traffic-light dots (red #ef4444, yellow #eab308, green #22c55e). The iPhone notch, the Android navigation triangle/circle/square, and the Browser preset's 'example.com' address bar appear only in the on-screen preview and are not baked into the downloaded image. The aspect-ratio buttons (auto, 16:9, 4:3, 1:1, 9:16) are likewise presentation-only and do not crop or letterbox the canvas. The tool is purely presentation packaging, frame, padding, shadow, and background, not an annotation or cropping tool, and it always outputs a single full-resolution PNG with no upscaling or 2x Retina option.
The tool supports gradient and solid color backgrounds. For custom image backgrounds, compositing tools offer more flexibility.
MacBook, iPhone, iPad, Android phone, and generic browser window frames are included.
Images are decoded, edited, and exported entirely inside this browser tab. No originals, exports, or metadata are uploaded.