Display watch face and app screenshots in Apple Watch and smartwatch device frames.
Upload a screenshot of a watch face or a smartwatch app screen and this tool renders it inside a device frame - case, bezel, and crown - ready for store listings, client presentations, or social posts. You choose the device model, and the image is scaled and composited to sit inside that frame's display window, then exported as a PNG. The usual surprise is aspect ratio: watch faces are square images, app screenshots are portrait, and each frame's display window matches only one of those shapes, so the wrong one gets cropped or padded.
Every device model has a case graphic with a display window of fixed proportions. When you upload a screenshot, the tool scales it to fill that window and composites it beneath the case artwork, so the bezel and crown overlay the image. Because the window's ratio is fixed, an upload with different proportions is cropped or padded rather than stretched, which is why matching the source shape matters.
All compositing runs in the browser and the screenshot is never uploaded, which matters when the design is unreleased. The result exports as a PNG at the frame's native resolution. Sharpness is capped by the source: a 2x watchOS screenshot scaled down into a frame stays crisp, while a small image upscaled to fill a large case goes soft.
Only if the exported pixels happen to match Apple's required dimensions for that device, and framed renders rarely do. Apple's screenshot specifications give exact sizes per watch model, and the common practice is to submit clean screenshots at those sizes and use framed artwork for marketing. Check the current specifications before relying on a mockup for a listing.
No. The tool scales your upload to fill the chosen frame's display window, so any reasonably sized image works. What matters is density: upload a 2x screenshot (twice the point dimensions) for crisp results, and match the image's aspect ratio to the frame so nothing is cropped. A small square image upscaled into a large case will look soft.
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.