Wrap screenshots in realistic browser window frames (Chrome, Safari, Firefox) with customizable URL bar.
The window around your screenshot is drawn, not real: the tab strip, window controls, and address bar are graphics, and the URL in the bar is text you typed, never a page the tool loads. Upload an image, pick a Chrome, Safari, or Firefox frame, fill in the address, and export the composite. Two things surprise people: the mockup works offline with any domain string, and the frame adds real pixels, so the export is taller than the screenshot you started from. Plan for that when the result must fit a fixed slot.
A concrete input and expected output from the current implementation.
Input
Upload a checkout-page screenshot captured in your browser at 1280x960; set the address bar text to https://shop.example.com/checkout; choose the Chrome frame; export the result.
Expected output
A single raster image of the mockup: the 1280x960 checkout screenshot sits as the content area inside a Chrome-style window, with a tab strip and an address bar reading https://shop.example.com/checkout across the top and window edges around the sides. The page area keeps its 4:3 proportions (1280/960), and the image is taller than 960 px because the Chrome furniture adds its own height above the content.
The tool layers the drawn browser chrome over the uploaded image instead of loading the URL, so the bar shows exactly the typed string and the page area keeps the capture's 4:3 aspect ratio. The frame height above the content is why the export exceeds the original 960 px height.
The uploaded screenshot becomes the content area of a drawn window. The tool layers the chosen browser's furniture on top: a title/tab strip, an address bar, and window edges, rendered as graphics in that browser's style. The address text is plain input drawn into the bar; the tool does not fetch, parse, or verify the URL, so any string renders identically.
The composite is flattened into one raster image for download. From that point the frame and URL are pixels: editing the address or switching the frame style means rebuilding the mockup from the original screenshot, so keep the source file. Because the furniture sits above the content, the exported image is always taller than the content region alone.
No. The address bar is a text field; the tool draws your typed string into the frame and never fetches the page, so it also works with domains that do not exist. To mock up a real site, capture it in your browser first (hide the toolbar, crop to the viewport) and upload that image. The upload is processed locally.
The window furniture (tab strip, address bar, frame edges) is drawn above and around your image, and that extra height becomes part of the exported pixels. The content keeps its original proportions; only the chrome is added. For an exact target size, upload a slightly smaller capture and crop the finished mockup, or resize the export.
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.