3D Device Mockup Generator (Beta)

Put a screenshot or screen recording on a 3D phone, tablet, laptop or monitor: studio-lit pictures and animated videos for your website.

Opens: PNG, JPEG, WebP, HEIC, AVIF, GIF, MP4, MOV, WebM, MKV
Saves: PNG, JPEG, WebP, MP4, WebM, MOV, GIF

Create mockup

Screenshot or screen recording
Choose a file… or drop it here
.png, .jpg, .jpeg, .webp, .heic, .heif, .hif, .avif, .gif, .mp4, .mov, .m4v, .webm, .mkv · up to 200 MB
    Replace file

    An image (PNG, JPEG, WebP, HEIC, AVIF, or the first frame of a GIF) or a video (MP4, MOV, M4V, WebM, MKV, up to 5 minutes; the first 15 seconds are used).

    Options
    Device
    Output
    Angle
    Animation

    Transparent works with PNG, WebP, WebM, MOV, the website bundle and GIF (not JPEG or MP4).

    A hex colour, for example #1e293b or #f5f0e8.

    The short side in pixels: 1080p is 1920 × 1080 in 16:9. 4K (3840 px long side) is for pictures; GIFs are at most 480p.

    MP4 plays everywhere but can't be transparent. For a transparent video on a website, choose “Website: WebM + MOV”: WebM plays in Chrome, Edge and Firefox, the HEVC MOV in Safari, and you get the HTML to use both. GIFs are up to 10 seconds.

    Automatic: the length of your video (up to 15 seconds), or a length that suits the animation for a picture.

    Fill crops what doesn't fit (tall screenshots keep their top). Fit shows everything with black bars.

    Automatic turns the phone or tablet sideways for wide screenshots and videos.

    More options

    A soft studio reflection over the screen, as in product photos. Choose None to keep the screenshot's colours untouched.

    GIFs always use 20 fps.

    GIF transparency is all-or-nothing per pixel, so transparent GIFs leave out the soft shadow and blend the device's edges into this colour. Use your page's background colour for clean edges.

    Your files are deleted after processing.

    Upload a screenshot or a short screen recording and get it back on a 3D device: a phone, a tablet, a laptop or a desktop monitor, lit like a product photo with soft studio light, bright edges on the metal, a gentle reflection on the screen glass and a soft shadow underneath. Use the picture on a landing page, in an app store listing, a pitch deck or a social post, or pick an animation for a looping video.

    How it works

    1. Upload a PNG, JPEG, WebP, HEIC or GIF image, or an MP4, MOV, WebM or MKV video.
    2. Choose the device and its colour: graphite, silver, midnight blue, soft gold or porcelain white. Phones and tablets turn sideways automatically for wide screenshots.
    3. Choose a picture or an animation.
      • Pictures come in five camera angles: tilted hero, front, three-quarter left and right, and flat from above.
      • Animations: Float (a gentle bob and wiggle), Turntable (a full spin that shows the back), Swing (turns left and right), Reveal (turns into view; laptops open the lid and the screen switches on) and Slow zoom. Float, Turntable and Swing loop seamlessly.
    4. Pick the background and format. Light or dark studio, white, light grey, a pastel gradient, charcoal, your own colour, or transparent. The 16:9, 1:1, 4:5 and 9:16 formats fit websites, feeds and stories.

    What you get

    • Pictures: PNG, JPEG or WebP. At 1080p they are 1920 × 1080, 1080 × 1080, 1080 × 1350 or 1080 × 1920 pixels; 720p, 480p and 360p give smaller files, and 4K gives 3840 pixels on the long side.
    • Animations: MP4 (H.264, plays everywhere), WebM (VP9), MOV (HEVC), both WebM and MOV for a website, or GIF (20 frames per second, at most 480p). Videos run at 30 or 60 frames per second, at 1080p, 720p, 480p or 360p, and are up to 15 seconds long (GIFs up to 10). A poster image of the first frame (or the final frame of a reveal or zoom) comes with every video.
    • Screen recordings play on the device's screen during the animation: a clip shorter than the animation loops, a longer one is cut to length.

    Transparent backgrounds

    PNG and WebP pictures keep the soft shadow as a semi-transparent layer, so the mockup sits naturally on any page colour. For animations, WebM with transparency plays in Chrome, Edge and Firefox, and MOV (HEVC with an alpha layer) plays with transparency in Safari. Website: WebM + MOV makes both from the same frames and gives you a short HTML snippet: each browser picks the file it can show with transparency. GIF transparency is all or nothing per pixel, so transparent GIFs leave the shadow out and blend the device's edges into an edge colour you choose (white by default).

    Tips

    • Upload screenshots at their original resolution. The image is filtered down to the screen's size in the mockup, which keeps small text crisp.
    • If your screenshot doesn't have the same shape as the device's screen, Fill the screen crops it (tall screenshots keep their top) and Fit inside shows all of it with black bars.
    • Under More options you can add a glossy floor reflection, remove the shadow, or turn the reflection on the screen glass down or off when the colours of the screenshot must stay exactly as they are.

    Privacy

    Your upload is only used for this job and is deleted as soon as it finishes; the results expire automatically. The device renders are kept to make later jobs faster, but they never contain anything from an upload: your screenshot or video is added to them for your job only.

    Frequently asked questions

    Which files can I upload?

    A picture (PNG, JPEG, WebP, or the first frame of a GIF, up to 20,000 pixels per side) or a video (MP4, MOV, M4V, WebM or MKV, up to 5 minutes and 4096 pixels per side). Videos play on the screen of animations; only the first 15 seconds are used.

    Can the background be transparent?

    Yes. Pictures: PNG or WebP. Animations: WebM (transparent in Chrome, Edge and Firefox), MOV with HEVC and an alpha layer (transparent in Safari), both together as “Website: WebM + MOV” with the HTML to embed them, or GIF. JPEG and MP4 can't store transparency, so they need a background colour.

    Why is part of my screenshot cut off?

    With “Fill the screen”, an image that has a different shape from the device's screen is cropped to fill it; tall screenshots keep their top. Choose “Fit inside” under “Fit on the screen” to see the whole image with black bars.

    How large are the results?

    At 1080p, pictures and videos are 1920 × 1080, 1080 × 1080, 1080 × 1350 or 1080 × 1920 pixels; 720p, 480p and 360p are smaller versions of the same formats, and pictures can also be 4K (3840 pixels on the long side). Videos run at 30 or 60 frames per second; GIFs at 20 frames per second and at most 480p.

    Are these real phone or laptop models?

    No. The phone, tablet, laptop and monitor are generic designs modelled for this tool, without logos or brand names.

    Is my file kept?

    No. Uploaded files are deleted right after processing and results expire automatically. Only the rendered devices without your content are kept to speed up later jobs.