What is a device mockup?
A device mockup is a realistic frame – an iPhone, Android phone, tablet or MacBook – wrapped around a screenshot or design so it looks like it is running on a real device. Mockups make interface work tangible: a flat screenshot on a slide is easy to ignore, but the same screen inside a phone frame instantly reads as “a real product”. Designers use them for portfolios, app-store shots, pitch decks, landing pages and social posts.
Why a pure-CSS mockup?
Most mockups are heavy PNG or PSD files that are slow to load and awkward to recolour. This generator instead produces a pure-CSS device frame – no images, no external libraries. That means it is razor-sharp at any zoom level, weighs almost nothing, and can be dropped straight into a web page. You control every detail live:
- Device type – iPhone, Android, iPad, generic tablet or MacBook.
- Orientation, size and rotation – portrait or landscape, scaled and tilted to taste.
- Frame and screen colour – including an optional two-colour gradient screen.
- Details – notch/camera cut-out, side buttons, home indicator, drop shadow and a glass glare overlay.
How to use the generator
- Pick a device and orientation at the top of the control panel.
- Adjust size, rotation and colours until the frame looks right in the live preview.
- Toggle the details you want (notch, buttons, shadow, glare).
- Copy the generated CSS and paste it into your project – then place your screenshot inside the frame element.
Common uses
Reach for a device mockup whenever a screen needs context: app landing pages, App Store and Google Play screenshots, client presentations, design case studies, README hero images and marketing graphics. Pair it with our image placeholder generator for the screen content and our Lorem Ipsum generator for realistic dummy text while you design.
Is the device mockup generator free?
Yes – it is completely free, needs no sign-up, and runs entirely in your browser. The CSS it produces is yours to use in any project.
Do I need Photoshop or any software?
No. Everything happens in the browser and the output is plain CSS. You only need a code editor to paste it into your project.
Can I use the mockups commercially?
Yes. The generated CSS frame is free to use, including in commercial work. You are responsible for the rights to whatever screenshot or content you place inside it.
Which devices are supported?
iPhone, Android phones, iPad, a generic tablet and MacBook – each with adjustable size, rotation, colours and optional details like notch, buttons and shadow.