iPhone 8 Mockup Freebie
Last Updated on July 27, 2026 by Editorial Team
A fully customizable iPhone 8 mockup crafted and released for free by Johannes Eret. Enjoy!
What makes this iPhone 8 mockup worth keeping in your asset library is the angle it uses. Instead of a flat, straight-on shot, the phones are tilted at a slight diagonal against that hot pink backdrop, which gives the whole composition a sense of motion rather than the static, catalog feel you get from most device mockups.
You can see that clearly in the preview: five phones are arranged edge to edge, each cropped in a way that lets the screen content and the colored side edges do the talking.
The bezel colors themselves are a nice touch. Blue, yellow, orange, and classic black and silver frames appear across the set, so you get a bit of variety built in rather than a single monotone device repeated over and over.
That matters if you’re presenting an app or a photography portfolio and want to hint at product color options, or simply want the mockup itself to feel less sterile.
Screen content in the preview ranges from a moody night sky with pine silhouettes to soft mountain gradients in dusty pink and blue, plus a close crop of a bicycle handlebar. This tells you the mockup handles both photography and UI screenshots equally well.
A starry landscape reads fine on that dark bezel, and a bright interface would pop just as easily against it. That flexibility is really the whole point of a good iPhone mockup: it should disappear into the background and let whatever you drop into the screen become the subject.
Where This Mockup Works Best
This kind of iPhone 8 mockup is built for app store screenshots, portfolio presentations, and social media posts where you need to show a mobile UI in a realistic frame.
If you’re a UI or UX designer wrapping up a mobile app project, dropping your screens into this template instantly makes flat Figma or Sketch designs feel like a finished, shippable product.
It also works well for photographers and content creators who want to showcase a photo as if it were being viewed on a phone screen, which is exactly what the mountain and landscape shots in the preview demonstrate.
Because the background is a bold, saturated pink, this particular version leans toward marketing material, social graphics, and case study covers where you want visual punch rather than a neutral studio look.
If you need something more subdued for a corporate deck, you’ll likely want to swap that background out, which brings us to how editable this file actually is.
Customizing the Screen and Background
Editing a mockup like this typically comes down to two things: the smart layer holding your screen content, and the background behind the device.
To swap in your own app screen or photo, open the smart object layer, paste your design in at the same aspect ratio as the existing placeholder, then save and close it so it updates back onto the phone automatically with the correct perspective and rounded corner masking already applied.
If you’re working with several screens for a case study, duplicate the phone group first, then repeat the process on each copy so you keep consistent bezel styling across every shot.
The pink background is easy to restyle if it doesn’t suit your brand. Select the background layer and change the fill to your own brand color, a gradient, or a plain neutral tone if you want the phones to feel more like a product shot than a marketing banner.
Since the bezels themselves come in a few different accent colors, try matching one of those edge colors to your background fill for a more cohesive, intentional look rather than leaving it as a random accent.
When you’re placing this mockup into a larger layout, such as a website hero section or a portfolio case study, pair it with clean sans-serif type and generous white space so the phone stays the visual anchor.
It also sits nicely alongside other device mockups, like a laptop or tablet frame, if you’re building a multi-device presentation to show how a design scales across screen sizes.
