Display long scrolling website screenshots in a tilted browser window with gradient backgrounds.
This tool takes a screenshot you already have - typically a full-page capture that runs several screen-heights tall - and places it inside a simplified browser window (rounded top bar, three dots, no real address bar content) angled in perspective against a gradient backdrop, then flattens the result into a single downloadable image. People are often surprised that a very tall screenshot doesn't keep its original scale: to fit the frame, the whole image is scaled down proportionally, so text near the bottom of a long page can end up too small to read clearly in the final mockup.
The uploaded image is placed inside a fixed browser-chrome header (title bar with dots) sized to match the screenshot's width. The screenshot's full height is kept and scaled proportionally rather than cropped, so a taller source image produces a taller, more compressed-looking mockup instead of losing content off the bottom.
A perspective control rotates the whole framed screenshot along one or two axes using standard CSS 3D transforms, while a separate gradient control sets the background color stops behind it. Increasing the tilt angle increases foreshortening, which is most visible at the top and bottom edges of a long screenshot.
No, the tool composites the entire screenshot into one tilted frame. If you want a mockup that shows multiple sections as separate stacked screens, you'd need to pre-split the image into pieces yourself before uploading each one.
A normal, shorter screenshot works fine and produces a mockup with ordinary browser-window proportions. The tool isn't limited to tall captures; that's simply the case its tilt and scaling are built to handle without the content becoming illegible.
The 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.