Tooladoo Free online tools for your files

Laptop Mockup Generator for Website Screenshots (Beta)

Show a website or web app on a 3D laptop: pick the angle, colour and background, and download a picture or an animation.

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.

    This page puts a website or web-app screenshot on a 3D laptop: an open lid with a thin bezel and a webcam, a keyboard deck with keys and a trackpad, lit with soft studio light. It starts with the tilted hero angle; the front, three-quarter and top views are one click away.

    How to make a laptop mockup

    1. Capture the page in a desktop browser. The laptop's screen has a 16:10 shape, so a window of 1440 × 900 or 1680 × 1050 pixels fills it without cropping. A full-page screenshot works too: the top part is shown.
    2. Upload the PNG or JPEG.
    3. Choose the colour: graphite, silver, midnight blue, soft gold or porcelain white. The polished edges stay bright on every colour, like the cut edges of an aluminium body.
    4. Pick the background and the format: 16:9 for website heroes, 1:1 or 4:5 for social posts.
    5. Download the picture, or choose Animation and Reveal for a video in which the lid opens and the screen switches on.

    What to expect

    • The screenshot is filtered in linear light and sampled like a real display seen at an angle, so small text stays readable in the three-quarter views instead of shimmering.
    • With a 16:9 screenshot the 16:10 screen is filled by cropping a little from the sides; choose Fit inside to keep the whole width with thin black bars instead.
    • The 4K option makes a 3840-pixel-wide picture for print or large hero images.

    Pitfalls

    • A dark website on the Dark studio background can make the screen edge hard to see. The light studio or the pastel gradient give more contrast.
    • Browser screenshots taken on a high-density display are large; that is fine, as they are scaled down before rendering and look sharper for it.

    More about what this tool reads and writes: 3D Device Mockup Generator.

    More with 3D Device Mockup Generator

    • Bulk Image Resizer

      Resize, crop and compress one photo or hundreds at once: JPEG, PNG, WebP, HEIC, GIF, BMP and TIFF, with a target file size.

    • Image Compressor

      Make JPEG, PNG and WebP pictures smaller in KB without changing their size in pixels: by quality, to a target size, or with no quality loss at all.

    • Image Cropper

      Crop one picture or a whole batch to the same area or an exact shape, keeping the format, the quality and even the animation of GIFs.

    • Image Converter

      Convert pictures between more than 30 formats, from HEIC, AVIF, JPEG XL, PSD, SVG and camera RAW to JPG, PNG, WebP, AVIF, GIF or ICO, one file or hundreds.