iPhone 8 Mockup
Last Updated on August 12, 2026 by Editorial Team
A glossy iPhone 8 mockup made in Sketch App by Aleks Witko. Happy downloading!
What makes this iPhone 8 mockup useful is how faithfully it captures the device’s actual proportions and finish, right down to the rounded home button area, the visible antenna lines, and the subtle diagonal sheen across the glass.
The screen is shown mid-boot with the Apple logo centered on a soft gradient black background, which gives you a clean, neutral starting point rather than a locked-in app screenshot to work around.
That gradient sheen is doing a lot of visual work here. It reads as glass and metal without relying on heavy shadows or complex lighting rigs, which keeps the file light to work with and easy to place on top of any background color or texture.
The soft drop shadow beneath the phone is understated enough that it won’t fight with whatever context you drop it into, whether that’s a plain color backdrop, a product photo, or a busier marketing scene.
This kind of iPhone 8 mockup earns its keep in app design presentations, portfolio case studies, and client decks where you need to show a mobile UI without shooting real photography.
Because it’s a Sketch file, it slots naturally into an existing app design workflow. You can drop your own screen design into the display area, resize the artboard to match your presentation format, and export straight from the same file you’re already designing in.
Product pages, App Store screenshot sets, social media previews, and pitch decks all benefit from this kind of clean device framing, since it lets the interface itself stay the focal point instead of competing with an ornate mockup style.
Editing the Screen Content
Swapping in your own design is straightforward once you’re inside the file.
Find the layer or group that represents the screen area and either mask your artwork into that shape or replace the existing fill with your exported UI screen.
Keep an eye on the rounded corners at the top and bottom of the display. Matching your artwork’s corner radius to the phone’s actual screen curvature is what keeps the final image looking believable instead of pasted on.
If you want to preserve some of that glossy highlight over your new screen content, duplicate the reflection layer and bring it above your artwork, then lower its opacity so it reads as a light glare rather than obscuring your design.
Adjusting the Background and Composition
The neutral warm-to-cool gradient backdrop in the preview is easy to restyle to fit a brand palette.
Select the background layer and swap the gradient stops for your own brand colors, or replace it entirely with a flat color, photo, or pattern if you’re placing the mockup into a larger page layout.
Since the phone itself is rendered with realistic lighting, it tends to pair well with minimal, uncluttered backgrounds rather than busy textures that would compete with its own reflections.
For multi-device layouts, duplicate the phone group, angle or offset the copies slightly, and stagger their shadows so the composition doesn’t feel like a flat row of identical repeated screens.
This mockup also pairs well with simple UI kits or icon sets when you’re building a quick app landing page, since the device frame stays quiet enough to let typography and supporting graphics carry the rest of the design.
