Screenshot beautifier
Add a background, padding, rounded corners, shadow, device frame and title watermark to a screenshot, with live Canvas preview and PNG export.
Runs in your browserEvery computation happens in your browser — your data never leaves this device.
Your image is processed locally and never uploaded.
No screenshot selected yet
Preview
Output
What this tool does
- Wrap a screenshot in a gradient background with rounded corners and a soft shadow so a blog post or product page does not look like a raw screen grab.
- Add a device frame around app screenshots to imitate a real phone or laptop, which reads much better than the bare image.
- Keep a batch of screenshots consistent by reusing the same padding and corner radius, so every image in one article matches.
- Stamp a small site watermark such as unikit.cc so the screenshot still shows where it came from after being forwarded.
Example
Input
A 1280 × 800 screenshot, padding 40 px, radius 16 px, background sky, no frame, no title, shadow 0/24/48 at 0.35 opacity
Output
Canvas 1360 × 880; background linear-gradient(#38bdf8, #6366f1); radius 16 px; shadow rgba(15, 23, 42, 0.35); export name screen shot-beautified.png
The canvas is padding × 2 plus the image: 40 × 2 + 1280 = 1360 and 40 × 2 + 800 = 880. An empty title reserves no 40 px title block; adding one makes the canvas 40 px taller.
Frequently asked questions
Is my image uploaded to a server?
No. The file is decoded with createImageBitmap, painted onto a Canvas in the page, and exported through canvas.toBlob — there is no network request at all and it works offline.
Why is the export PNG only, with no JPG option?
PNG is the only output today because it keeps an alpha channel, which is what makes the transparent background preset useful. JPEG would fill transparency with black or white and ruin that. Run the PNG through an image compressor if you need a smaller file.
I enabled the device frame but cannot see it.
The frame is a solid border drawn around the image (default #cbd5e1). It only becomes visible when frame thickness is in the tens of pixels and padding is large enough to leave room for it. The frame colour accepts any #RGB or #RRGGBB value.
What happens if I enter a negative padding or radius?
Rendering stops with "Padding cannot be negative" or "Corner radius cannot be negative". The radius is also clamped to half of the shorter side so the shape always stays drawable.
Which image formats are supported?
Anything the browser can decode: PNG, JPEG, WebP and GIF (first frame only). Very large images use a lot of memory, so scaling down below roughly 4000 px first is a good idea.
Keywords：screenshot beautifier截图美化截图加背景shadow圆角device framepng背景渐变