iPhone X Mockup

Last Updated on July 13, 2026 by Editorial Team

A free mockup with the newest Apple device: iPhone X. Crafted and shared by Evyatar Mor.

What makes this particular iPhone X mockup useful is how invisible the device itself becomes.

The frame is rendered in true black, floating against a pure black background, so when you drop it into a slide or a portfolio page the phone edges simply disappear and only the screen content reads.

That’s a deliberate choice worth noticing: the notch, the speaker grille, the side buttons and the subtle bevel on the glass are all there with enough realism to sell the device, but none of it fights for attention against whatever UI you place inside the screen.

In the preview itself, the screen is filled with a moody teal-to-blue gradient scattered with fine star-like specks, almost like a night sky or nebula wallpaper, with a small credit line sitting quietly near the bottom edge.

That placeholder image is a good indicator of how the mockup behaves with content: it favors deep, saturated colors and high-contrast imagery, since anything darker or muted tends to blend into the black bezel and lose definition.

If you’re mocking up an app screen, a lock screen wallpaper, or a piece of UI design, keep your content bright enough at the edges to distinguish it from the frame, or add a thin border inside your design so the screen doesn’t visually bleed into the phone’s glass.

Where This Mockup Works Best

This is the kind of asset you reach for when you need a clean, realistic phone frame without a busy background pulling focus.

App designers use it for showcasing screens on a portfolio site or in a case study, since the black backdrop makes it easy to drop straight into a dark-mode portfolio layout or a Dribbble shot without extra editing.

It also works well for:

  • Presenting mobile UI kits, wallpaper packs, or lock screen designs where the phone needs to look premium and unobtrusive
  • App store screenshots and product pages that need a realistic device shot rather than a flat screenshot
  • Social media posts announcing an app launch, where the black phone against a black canvas creates a polished, gallery-like feel
  • Pitch decks and client presentations where you want the interface to feel tangible without distracting device styling

Because the phone is shown straight-on and centered, it’s especially good for side-by-side comparisons, like showing two states of an app or a before-and-after screen, since the framing stays consistent and symmetrical.

Editing it is straightforward in any layered design tool.

You isolate the screen area, either through a smart object, a clipping mask, or a simple layer placed behind the frame, and swap in your own screenshot or artwork sized to match the display dimensions.

Because the background is solid black, it’s simple to place the whole mockup onto a colored or photographic backdrop later if you don’t want the black-on-black look; just be sure to check the edges of the phone frame for any faint anti-aliasing that might need cleanup against a lighter background.

For presentations, this mockup pairs naturally with brand color overlays, subtle drop shadows, or a soft glow behind the phone if you want it to feel like it’s lit from within, which suits app icons or interfaces that already use vibrant gradients like the one shown in the preview.

It also sits comfortably alongside other device mockups, a laptop or tablet in the same black, screen-forward style, if you’re building a multi-device showcase for a responsive app or website.

Similar free resources