Free iPhone X Clay Mockup
Last Updated on August 15, 2026 by Editorial Team
A nice dual color iPhone clay mockup (includes white and black iPhones). Fully customizable and easy to use.
Created and shared by Matt Koziorowski.
What makes this iPhone X clay mockup so useful is the restraint in its rendering.
Instead of glossy screens, reflective glass, and dramatic studio lighting, you get two simplified device bodies, one black and one white, standing at a gentle angle with soft, even shading.
That clay style strips away the visual noise of a photorealistic phone mockup and leaves you with pure form: the rounded corners, the notch, the side profile of a second phone peeking out behind the front one.
This kind of clay rendering has become a go-to look for product pages, portfolio case studies, and app landing pages precisely because it does not compete with your screen design.
A photorealistic mockup with glare and reflections can distract from the UI you are trying to showcase.
A clay mockup does the opposite. It behaves almost like a matte display stand, quietly holding your interface while keeping all the attention on colors, typography, and layout inside the screen itself.
Where This Clay Mockup Works Best
It suits app store screenshots, Dribbble and Behance shots for mobile UI projects, pitch decks, and product pages where you want a clean, neutral frame.
Because the black and white phones are paired together at an angle, it also works well for before-and-after comparisons, dark mode versus light mode presentations, or simply showing two different screens side by side in one composition.
The soft, toy-like quality gives it a friendly, approachable feel, which makes it a natural fit for consumer apps, startup landing pages, and design system documentation where a lighter, less corporate tone is welcome.
It is less suited to projects that need photographic realism, like ads meant to look like lifestyle photography or hero images where a hand-held, in-context feel is the goal.
Editing the mockup is straightforward once you drop it into your design tool.
The screen area on the front phone is where your interface goes, so the main task is placing your UI artwork or screenshot into that space and scaling it to fit the visible screen boundary, including the notch cutout at the top.
Because the phone body itself is a simple clay shape rather than a photo, recoloring it is easy if you want to match a brand palette instead of sticking with plain black and white.
You can usually do this by selecting the shape layers that make up the device body and swapping the fill color, then nudging the shading layers slightly to keep the sense of depth intact.
If you only need one phone rather than the paired black and white composition, you can hide or delete the back device and recenter the remaining one, which is handy for single-screen presentations or when space is tight in a layout.
For a mockup like this, background choice matters more than usual since there is no photographic environment doing the work for you.
A soft gradient, a solid brand color, or a subtle pattern behind the two phones tends to look better than a stark white page, and it helps the clay style feel intentional rather than unfinished.
Pairing it with flat icons, simple geometric shapes, or a bit of shadow beneath the phones can round out a composition for a website header or a slide in a presentation deck.
