Place screenshots into realistic browser chrome frames with address bar and window controls.
Present a screenshot as if it were open in a browser. You upload an image, type the URL the address bar should show, and the tool draws a window frame around it - address bar and window controls - then exports the composite as a PNG. The chrome is drawn around the screenshot, never over it, so nothing is cropped or rescaled and the export is the screenshot plus the frame. The usual surprises are size (a long full-page capture becomes a very tall framed image) and double chrome (framing a screenshot that already contains a browser). The image is processed in the browser and never uploaded.
A concrete input and expected output from the current implementation.
Input
File: landing.png, a 1280 x 800 capture of the top of a page; address bar text: https://example.com
Expected output
A PNG of the whole composition: the 1280 x 800 screenshot fills the frame's page area, the address bar reads https://example.com, and the window controls sit at the top. The export is taller than 800 pixels because the chrome band adds its own rows above the page area.
Framing is additive: the chrome is drawn above the uploaded image, so the export's height is the source height plus the chrome band's height. The address bar text is decoration and does not change the image itself.
Your uploaded image becomes the page area of a drawn window frame. The tool renders the chrome around it - an address bar showing the URL text you entered, plus window controls - and composites frame and screenshot into one canvas. The URL is drawn as text, so it stays sharp at any export scale, and the screenshot keeps the pixel size you uploaded. The job runs in the browser; the image is never uploaded.
The output is a single PNG of the whole canvas: screenshot plus frame. Because the chrome sits above the page area, the export is taller than the source image by the height of that band, and the page area is not downscaled to compensate. A full-page capture of a long page therefore yields a proportionally long export, and the framed image shows your screenshot at the same pixel size you uploaded.
The URL is display-only text drawn on the frame. It never loads a page and never changes the screenshot, so you can enter anything - but for a public mockup, use the real URL of the page you captured. Viewers treat the framed page as live, so mismatched address text is the easiest way to make a mockup misleading.
Framing is additive: the chrome band is drawn above the image, so the canvas is the screenshot plus that band, and the page area is not shrunk to fit a preset size. If a final dimension matters, capture at the width you will display and crop or accept the extra band.
The example and behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.
Pick colors visually and convert between HEX, RGB, HSL, and CMYK formats.
Preview how screen colors translate to print with CMYK simulation and proofing.
Preview any Google Font at various sizes, weights, and with custom sample text.
Create linear, radial, and conic CSS gradients with a visual editor and code output.
Generate harmonious color palettes from a base color using color theory rules.
Simulate how colors appear to people with various types of color vision deficiency.