Device Frame Generator
Wrap screenshots in browser, phone, or tablet frames and export as PNG
40px
Screenshot
Drop screenshot or click to browsePNG, JPG, WebP
Upload a screenshot to enable export.
Preview
Frame: Browser WindowPadding: 40pxScreenshot: None
Device Frame Generator — Browser and Phone Mockup Frames
Upload any screenshot and wrap it in a professional browser window, phone, or tablet frame. Choose from multiple background gradients, frame colors, and padding sizes. Everything renders in your browser — no data is ever sent to a server. Click Render PNG to generate a high-resolution 2× export ready for portfolio showcases, app store graphics, blog post headers, social media, or presentation slides. No watermarks, no account needed.
Built and maintained by Meet Shah · Last updated
What this tool is used for
- Wrapping a screenshot in a phone or browser frame for a portfolio.
- Producing app store or marketing graphics from captures.
- Presenting a mobile screenshot so its context is obvious.
- Producing a consistent frame across a set of screenshots.
- Making a capture presentable for a slide.
Frequently Asked Questions
- How is the mockup rendered?
- As real DOM — the frame, background and your screenshot are laid out with CSS, then serialised to a PNG. That is why the frames stay crisp at any size: they are borders and radii, not bitmap artwork, so nothing is being scaled up from a fixed-resolution source.
- Why is the export 2×?
- Because a mockup is usually viewed on a high-density display or dropped into a slide that gets scaled. Rendering at twice the layout size means the result still looks sharp when a Retina screen doubles it back, which a 1× export cannot survive.
- Which frame should I choose?
- Match the context the product is used in, not the one that looks best. A responsive site belongs in the browser frame; a mobile app belongs in the phone frame. Framing a desktop dashboard inside a phone is the sort of mismatch that undermines the screenshot it was meant to sell.
- Why does my screenshot look stretched inside the phone?
- Because the frame has a fixed aspect ratio and a desktop-shaped capture cannot fill it without distortion. Capture at roughly the frame's proportions — a narrow viewport for the phone, a wide one for the tablet — rather than resizing a wide screenshot afterwards.
- Is this safe for internal screenshots?
- Yes. Everything renders in your own tab and the PNG is produced locally, so the image never leaves the machine. Worth remembering that the mockup does not redact anything — it frames exactly what you gave it, including whatever was in the corner of the capture.
Common errors and gotchas
- Framing a capture whose aspect ratio does not match the device, which distorts or crops it.
- Using a frame that misrepresents the platform the screenshot came from.
- Framing a low-resolution capture, which the frame makes more obvious.
- Letting the frame dominate so the actual content is too small to read.
- Using device artwork whose licence does not permit commercial use.
Related Design & CSS tools
Color Converter
Convert a color to HEX, RGB, HSL, HSB, and CMYK at once.
HEX to RGB
Convert HEX color codes to RGB / RGBA values.
RGB to HEX
Convert RGB values into HEX color codes.
CSS Box Shadow Generator
Visually design CSS box-shadow with a live preview and code.
CSS Border Radius Generator
Visually craft border-radius with a live preview.
HEX to CMYK
Convert HEX colors to CMYK print values.
CMYK to HEX
Convert CMYK print values to HEX colors.
HEX to HSB
Convert HEX colors to HSB / HSV values.