Online mockup generator

Mockup generator.
Drop a design in,

get a mockup.

3,900+ high-quality 3D-rendered mockups of devices, packaging and print. Create mockups online in your browser with a mockup maker that needs no Photoshop and nothing to install.

Static mockup generator, an online editor, at work in the browserStatic mockup generator, an online editor, at work in the browser

Change the color, the background and the light, then export a picture, a layered PSD or a video. Free mockups included.

Open Editor

What the mockup generator does

Everything happens in your browser tab

  • 3,903 mockups in editor

    Full access from just $9/mo

  • Drop or paste your design

    Drop your design in the browser tab, or copy paste it

  • Switch colors and content in one click

    Switch the contents, the color or the EU / US size in one click

  • Export PNG, PSD, SVG or video

    SVG compatible with Figma, PSD with Photoshop, Photopea, Affinity Designer

  • Video import and export

    Put a clip on a screen, export a video mockup as MP4 or WebM

  • Edit mockups online, no Photoshop

    The generator opens every scene in a moment, thanks to our optimization

  • Change color, use gradients

    Recolor the backdrop or paint a gradient on the canvas

  • Curves, Color balance, HSL

    Tune every tone of the picture

  • Focus blur

    One spot sharp, the rest soft

Mockups you can edit online

Featured scenes from the library, by category. Each one is a 3D render you edit right in the browser: open a scene, start from the whole category in the editor, or browse all of its mockups.

  • iPhone mockups

    Show an app or a website on an iPhone screen. Drop in a screenshot, or a screen recording for a video mockup.Make an iPhone mockup onlineAll iPhone mockups

    AS-Mockups, iPhone Duo, Scene 16
    AS-Mockups, iPhone Duo, Scene 15
    iPhone 18 Pro Mockup, Scene 6
    AR-Mockups, iPhone 18 Pro, Scene 12
    AR-Mockups, iPhone 18 Pro, Scene 10
  • MacBook mockups

    Present a website, a dashboard or a product page on a MacBook. A video on its screen exports as MP4 or WebM.Make a MacBook mockup onlineAll MacBook mockups

    AO-Mockups, MacBook Pro
    AO-Mockups, MacBook Pro
    AP-Mockups, 13, MacBook
    AP-Mockups, 01, MacBook, Studio Display, iPad
    AL-Mockups, MacBook Pro
  • iPad mockups

    Put an app, a website or a portfolio on an iPad screen and export the mockup as a PNG or a layered PSD.Make an iPad mockup onlineAll iPad mockups

    AO-Mockups, iPad Pro
    AO-Mockups, iPad Pro
    AP-Mockups, 11, iPad Pro
    AL-Mockups, iPad Pro
    AL-Mockups, iPad Pro
  • Android mockups

    Show an Android app on a phone screen, from a single screenshot to a recording of the app in use.Make an Android mockup onlineAll Android mockups

    Pixel Fold 10 Pro Mockup, 014
    Pixel Fold 10 Pro Mockup, 008
    AK-Mockup, Pixel Fold Pro 10, 13
    AK-Mockup, Pixel Fold Pro 10, 16
    AF-Mockup, Nothing Phone 3, Scene 6
  • T-shirt mockups

    Put a logo, a print or merch artwork on a t-shirt, then change the colors and the background to match the brand.Make a t-shirt mockup onlineAll t-shirt mockups

    Barista, T-Shirt Mockup
    T-Shirt Packaging Mockup
    Modern T-Shirt Mockup with Outdoor Setting
    T-Shirt Mockup, Style 01, 02
    T-Shirt Mockup, Style 01, 04
  • Hoodie mockups

    Try a print or a logo on a hoodie before it is produced, and show a whole merch line in the same scenes.Make a hoodie mockup onlineAll hoodie mockups

    Modern Hoodie Template in Urban Setting
    Urban Sweetshirt Mockup
    Isolated High Resolution Free Hoodie Mockup
    Hoodie environment mockup, 01
    Sweatshirt Mockup
  • Business card mockups

    Show a logo and a business card design in print, with US and EU sizes where a scene offers both.Make a business card mockup onlineAll business card mockups

    Grid, 02, US, Business Card Mockups
    Grid, 02, EU, Business Card Mockups
    Lihtne, Scene 26, US Format, Business Card Mockup
    Muele, Business Card Mockups in Perspective View, US, Scene 15
    Muele, Business Card Mockup in the Folds of Fabric, US, Scene 16
  • Packaging mockups

    Put a label or a print on boxes, bags, cups and takeaway packaging to present a brand before it is printed.Make a packaging mockup onlineAll packaging mockups

    Takeaway Mockups: Plate & Napkin
    Takeaway Mockups: Pizza Box
    Snack Bar Mockup
    Barista,Packaging & Cups Mockup
    Cosmetic Mockups, Scene 4
  • Poster mockups

    Present a poster or an event announcement on a wall, on a stand or in the street.Make a poster mockup onlineAll poster mockups

    Transparent A-Stand Mockup
    Foil Poster Mockup
    Bvge, Wall Mockup in Minimalistic Environment, US, 01
    Ouzen, Frame Mockup, US, 09
    Ateur, Elegant Paper Mockup, EU, 05
  • Book mockups

    Show a book cover on a bound book, on its own or as part of a stationery set.Make a book mockup onlineAll book mockups

    Grid, 06, US, Bound Book and Envelope Mockups
    Grid, 15, EU, Bound Book Mockup
    Free 3 Book Mockup
    Free Torn Book Cover Mockup
    Boyne, Realistic Book Mockups and Packaging Mockups, EU, 12
  • Magazine mockups

    Present a magazine cover and its pages in branding scenes, many of them in US and EU sizes.Make a magazine mockup onlineAll magazine mockups

    Lihtne, Scene 6, EU Format, Magazine Mockup
    Muele, Magazine Mockups with Beautiful Play of Light, EU, Scene 07
    Muele, Photorealistic Magazine Mockup, US, Scene 12
    Ateur, Book Mockups, EU, 01
    Ateur, Magazine Mockup, EU, 10
  • Billboard mockups

    Show an outdoor ad on a billboard, a building wall, a construction banner or a glass stand.Make a billboard mockup onlineAll billboard mockups

    Glass Stand Mockup
    Building Wall Mockup
    Billboard Mockup, Environment, US Scene 11
    Billboard Mockup, Environment, EU Scene 04
    Construction Banner Mockup

How to make a mockup online

Pick a scene, drop or paste your design on its screen, and export a PNG, a PSD, an MP4 or a WebM, all in your browser, with nothing to install.

  • 1. Pick a scene

    Open the editor and choose from 3,903 mockups: search the library, narrow it by category, or show only the free ones. Every scene opens in a moment.Open the mockup generator

  • 2. Drop or paste your design

    Drag a picture or a video onto a screen, or copy your design and paste it into the tab. Each screen takes its own design. Change the color, the background and the light if you like, or tune curves, color balance and focus blur.

  • 3. Export the mockup

    Save a PNG, a layered PSD or an SVG, or an MP4 or WebM video when a clip plays on the screen. The PSD keeps its layers for Photoshop, Photopea or Affinity Designer, and the SVG opens in Figma.

First mockup in a minute

Open Editor

No card needed.

Questions

What is a mockup generator?
A mockup generator puts your design into a ready-made scene, such as a phone screen, a t-shirt or a box, and gives you back a finished picture. This one runs in your browser: open it on your computer, drop in your design and export the mockup on the same page. There is nothing to download or install.
Is the mockup generator free?
Free mockups are free to edit and export: sign in and open one, or browse them all on the free mockups page. The whole library, with PNG, PSD, MP4 and WebM export, comes with a plan.
Do I need Photoshop?
No. The mockup maker runs in the browser. If you want to keep working in Photoshop, export a layered PSD, or an SVG for vector work.
What can I export?
A PNG, an SVG for Figma and a layered PSD for Photoshop, Photopea or Affinity Designer. With a video on a screen, also an MP4, or a WebM that keeps the background transparent.
Can I put a video on the screen?
Yes. Drop a clip on a device screen, scrub the timeline and export the result as MP4 or WebM.
Can a mockup have several screens?
Yes. Each screen takes its own design, and you can replace one later or take it off to bring back the empty screen.
How do I create a mockup online?
Open the generator and pick one of 3,903 scenes: search them, narrow them by category, or show only the free ones. Drop your design on its screen and export a PNG, a layered PSD or a video.
How is it different from a PSD mockup?
A PSD mockup is a file you download, open in Photoshop and edit by replacing its smart object. Here the scenes open in the browser: drop your design on a screen, change the color, the light and the effects, and export. If you still want a PSD, export one with its layers.
How is ls.graphics different from Smartmockups or Placeit?
ls.graphics is built around mockup quality and control: 3D-rendered scenes, effects you tune in the browser (curves, color balance, focus blur), layered PSD and SVG export, and a Mockup plugin for Figma.
Can I use the mockups for client work?
Yes. Use them in personal and commercial projects, including work for clients, and change them to fit. You cannot resell or redistribute them or share the source files.

Coming from Canva, Smartmockups or Placeit? See how we compare: vs Canva mockups · vs Smartmockups · vs Placeit