iPhone X Clay Mockup
Last Updated on July 16, 2026 by Editorial Team
A free iPhone X clay mockup available in two versions: black and white. Created for Sketch App by Greg Dlubacz.
Enjoy!
What makes this iPhone X mockup work so well is the clay treatment itself. Instead of a photorealistic device with glass reflections and metallic edges, you get two flat, matte silhouettes rendered in soft shadow and highlight, one angled slightly and one facing straight on.
The notch, rounded corners, and side button cutouts are all there, so the device reads instantly as an iPhone X, but the surface is stripped down to pure form.
That clay style is exactly why designers reach for this kind of mockup when a screen render would be distracting. Dark, moody, almost sculptural, it puts all the visual weight on shape and shadow rather than on chrome and glare.
This makes the mockup especially useful for presentation contexts where the product itself needs to stay the hero of the shot.
Portfolio covers, app landing pages, and Dribbble shots all benefit from this kind of restraint. A clay phone sitting in a dark, textured background feels more like an editorial photograph than a UI screenshot, which is why it works so well as a hero image or a cover slide before you ever drop a real screen into it.
It’s also a smart choice for early-stage presentations, when you want stakeholders focused on layout and flow rather than getting hung up on colors or copy that aren’t final yet.
Working With the Black and White Versions
Having both a black and a white clay version gives you flexibility that a single-color mockup doesn’t.
The black version, shown here, sinks into dark backgrounds and reads as premium and understated, which suits app promo pages, dark-themed portfolios, or moody social posts.
The white version will do the opposite, standing out against darker backgrounds or blending into bright, minimal layouts.
Choosing between them usually comes down to what surrounds the phone. If your background art, gradient, or photography is already dark, the black clay body will nearly disappear into it and let the screen content float.
If you want the device itself to be a visible, tactile object in the composition, place the white version against a dark backdrop so the silhouette pops.
Since this was built for Sketch, editing it follows the same logic as any layered mockup file. Open the artboard, find the screen layer or clipping mask sitting inside the device frame, and swap in your own UI screen at that layer.
Keep your screen export at the same aspect ratio as the iPhone X display so it lines up with the rounded corners and notch without needing extra masking work.
Because the device body is a flat, shadowed shape rather than a photographic layer, you can also recolor it directly, nudging the clay tone warmer or cooler to match a brand palette without breaking the realism of the mockup.
Pairing this mockup with other assets is straightforward. Drop it into a scene alongside a laptop or tablet mockup for a multi-device presentation, or use it alone on a solid or gradient background for a clean app store style graphic.
Because the clay style is so neutral, it also sits comfortably next to bold typography, icon sets, or illustrated backgrounds without competing for attention.
If you’re building out a full case study, this pairs naturally with browser or desktop mockups so the mobile screens don’t feel like an afterthought next to the rest of the presentation.
