Wrap a screenshot in a real CSS gradient, a real corner radius and a real device frame. The preview is the export drawn smaller by the same function, so what you see is what the file gets.
Initializing in your browser…
Remove a background with a model or with a colour key that has a real alpha ramp, scored against a corpus whose right answer was chosen rather than found.
Placeholder images described once and drawn two ways, so the preview, the raster and the SVG are the same picture. The label is measured and made to fit, and the quality slider only appears where quality does something.
Read text off a picture with Tesseract, after preparation that measures the type and enlarges it: 8px text went from a 53 percent character error rate to 8. Every word carries a confidence and a box drawn on the picture.
The eight gradient presets painted by the browser from their own CSS, and by the canvas the export uses, over the same box.
Input
linear-gradient(135deg, #667eea 0%, #764ba2 100%) · 1200 by 600
Pixels differing from the browser’s own painting
before after Ocean 1200 x 600 394,530 0 Sunset 1200 x 600 543,727 0 Ocean 600 x 600 0 0 of 720,000 720,000 aspect ratio buttons 1 file 4 files device frames 3 files 5 files
A canvas gradient takes two POINTS, so an angle has to be turned into the gradient line CSS Images 3 section 3.3 defines. Corner to corner is 135 degrees only on a square, which is why the old export was exactly right at 600 by 600 and wrong everywhere else. The other two rows are settings that did nothing at all: all four aspect ratios produced a byte identical file, and so did the iPhone and Android frames.
Wrap a screenshot in a gradient background, a rounded card, a soft shadow and a device frame, then export it as PNG, JPEG or WebP. The preview is the export drawn smaller by the same function, and the gradients match the browser's own painting of the CSS they name.
Showcase app screenshots in device frames for landing pages and app store listings.
Create eye-catching header images from plain screenshots.
Frame feature screenshots at the exact ratio a network wants, without cropping the screenshot.
Upload a 1280x800 screenshot, pick Ocean, keep 64 px of padding, set the radius to 16 and the shadow to 40, and choose the Browser frame with your own domain in the address bar. The export is a 1408x984 PNG with the chrome baked in.
Choose 1:1. A 1280x800 screenshot with 64 px of padding becomes a 1408x1408 canvas, the extra space added as padding above and below, with nothing cropped.
A screenshot beautifier has two pictures to keep in agreement: the one on screen and the one in the file. This version draws them with ONE function at two scales, so they cannot drift apart. The preview is the export, shrunk. That matters most for the corner radius and the shadow, which are lengths: 16 px of radius next to a 480 px preview and 16 px of radius on a 1920 px export are not the same corner, and a preview built in CSS while the export is built on a canvas will show you the first and give you the second.
The background presets are gradient SPECS rather than CSS strings, and both the preview's CSS and the canvas's geometry are generated from them. A canvas has no idea what an angle is: `createLinearGradient` takes two points, so a preset saying 135deg has to be turned into the gradient line CSS Images 3 section 3.3 defines, which runs through the centre of the box with length |W sin A| + |H cos A|. Corner to corner is that line only on a SQUARE. Measured against the browser painting the same string, the previous version agreed exactly at 600 by 600 and differed on 54.8 to 75.5 percent of the pixels of a 1200 by 600 box, up to 20 levels of 255. This version agrees on every pixel at every shape, which is asserted in the test suite against the browser's own painting rather than against a second implementation. Because the spec is the source of truth, presets can now carry three stops, an angle that is not 135, a radial shape, and interpolation in OKLCH, none of which a two-hex regex could express.
The device frames are drawn into the file, not just onto the screen. All five change the exported image and all five are measured in units of a 1000 pixel wide picture, so a frame on a 400 px screenshot and one on a 3000 px screenshot look alike. The browser frame carries traffic lights and an address bar with text you can set; macOS carries the lights alone; iPhone adds a status bar, a notch that dips over the picture and a home indicator; Android adds a status bar and the three navigation keys. The chrome is inside the same rounded clip as the screenshot, so it shares the card's corners.
The aspect ratio buttons produce the ratio. Auto, 16:9, 4:3, 1:1, 3:4 and 9:16 each reach their shape by GROWING the padding on the short side, so the screenshot is never cropped and never stretched, and the page prints the canvas size and what had to give. Output is PNG, JPEG or WebP, with the format checked against what the browser can actually encode (a canvas asked for a type it cannot write returns a PNG and says nothing), a quality slider that appears only where quality does something, and the size, type and byte count of the last download reported back.
Yes, and it is one function rather than two: the preview calls the same drawing code at a smaller scale. Lengths such as the corner radius and the shadow blur are given in the screenshot's own pixels, so 16 px of radius means 16 px of the file.
Because a canvas gradient takes two points, not an angle. Corner to corner is a 135 degree gradient only on a square box; on a 1200 by 600 box the real gradient line runs from (150, -150) to (1050, 750) and is 1272.8 px long, not the 1341.6 px diagonal. This version computes that line, and matches the browser's own painting on every pixel.
Yes. All five frames are drawn into the export. In the previous version only the browser and macOS bars were, and an iPhone or Android export was byte identical to one with no frame at all.
No. The ratio is reached by adding padding to the short side, so the picture keeps every pixel and its own proportions. The banner above the preview names the new canvas size and says which side grew.
Backgrounds are solid colours and gradients. For a photograph behind the screenshot, composite it in an image editor first and upload the result.
Images are decoded, edited, and exported entirely inside this browser tab. No originals, exports, or metadata are uploaded.