8 Tips for Realistic Device Mockups

The gap between a flat, pasted-on frame and a mockup that looks like a real photo comes down to how light behaves. Realistic mockups are not about fancy assets, they are about a handful of cues the eye expects: one light direction, a soft grounding shadow, honest perspective, and a calm background. Get those right and even a quick export looks convincing.

This guide is for designers, marketers, and founders who want their device and website mockups to feel believable in a hero, a deck, or an app store. I will share eight practical tips on lighting, shadows, perspective, reflections, and backgrounds, with a do and don't table you can copy. None of them take long, and together they lift a mockup from obviously fake to genuinely polished.

What you will learn

• How one consistent light direction sells realism instantly.
• Why soft shadows ground a device and hard shadows look pasted.
• How to keep perspective honest without cropping the screen.
• When subtle reflections help and when they ruin a mockup.
• How to pick backgrounds that support, not fight, the screen.
• A quick do and don't table to check before you export.

Tip 1: Keep one light direction

The fastest way to break realism is mixing light directions. If a highlight sits on the top-left of the frame, the shadow must fall to the bottom-right. When light seems to come from two places at once, the brain flags it as fake immediately, even if it cannot say why.

Decide on one light direction before you start and hold it across the whole mockup. Top-left is a safe, natural default because it matches how most photos are lit. If you build a set, use the same direction on every frame so the group reads as one scene.

Tip 2: Soften your shadows

A tight, hard-edged shadow looks like a sticker, not a real object. Real shadows spread and fade as they move away from the device, with a soft edge that blurs into the surface. Softening the shadow is the single biggest upgrade you can make.

Match the shadow color to the background rather than reaching for pure black. A shadow on a warm surface should be a darker warm tone, not a hard gray. And keep it under and slightly behind the device, so it grounds the frame instead of floating beside it.

Tip 3: Ground the device on a surface

A device that floats with no contact point feels weightless and fake. A small grounding shadow directly beneath the frame tells the eye it is sitting on something. Even a faint soft ellipse under a phone changes how solid it feels.

If the mockup uses a surface like a desk, let the device cast onto it and pick up a hint of its color. This contact is what separates a real scene from a frame pasted on a flat color. Our complete guide to device mockups covers this across device types.

Tip 4: Keep perspective honest

Perspective adds energy, but too much of it crops the screen and warps the content. A slight tilt of around ten degrees feels dynamic while keeping the interface readable. Extreme angles look dramatic in isolation but hide the very thing you are showing.

For 3D frames, adjust the camera and orbit until the screen stays legible and the highlights look natural. If the content matters more than the drama, lean toward a gentler angle or a flat 2D view. Our 2D versus 3D comparison helps you choose, and the 3D mockups documentation covers camera controls.

Tip 5: Use reflections with restraint

A faint screen reflection can add realism, especially on a glossy device. But a strong, busy reflection competes with the interface and makes the screen hard to read. The goal is a hint of glass, not a mirror.

Keep any reflection subtle, low contrast, and matched to the light direction from Tip 1. If a reflection makes you squint at the content, it is too strong. When in doubt, less reflection reads as cleaner and more premium.

Tip 6: Pick backgrounds that support the screen

The background should support the screen, never compete with it. A calm gradient or a muted solid lets the interface lead. A busy photo or a saturated color pulls the eye away from the content you want people to see.

The screen should always be the brightest, most detailed thing in the frame. If the background is louder than the UI, tone it down. For photo backdrops, soft and subtle options from Unsplash work well, and a clean studio surface rarely fails.

Tip 7: Match body color to the scene

The device body color should fit the overall scene and the brand on the screen. A stark white phone on a dark moody background can clash, while a darker body ties the scene together. Small choices like this make the mockup feel intentional.

Pick a body color that complements, not matches exactly, the dominant color in the screen. A little contrast keeps the device from blending into its own content. You can adjust body color and background freely in the Zepixo Mockups workspace.

Tip 8: Start from a clean, high-resolution screenshot

No amount of lighting saves a soft screenshot. The frame can be perfect, but a blurry screen makes the whole mockup look cheap. Always capture at the highest resolution available, then scale down at export, never up.

Use real content instead of placeholder text, hide debug overlays, and crop tightly to the screen edges. A clean input is the single biggest factor in a clean result. For export specifics, see our mockup resolution and export guide.

Do and don't at a glance

Here is the quick check I run before exporting any mockup. If every row lands on the do side, the frame will read as realistic.

Want realism without the fuss? Open Zepixo Mockups to set lighting, shadows, body color, and backgrounds in one place, then export a frame that looks photographed.

Putting the tips together for realistic mockups

None of these tips is hard on its own, and the magic is in stacking them. Pick a light direction, soften the shadow, ground the device, keep the tilt gentle, and choose a calm background. That is most of realism, done in a couple of minutes.

When you build a set, lock the same light direction, body color, and background across every frame. Consistency is what makes a row of mockups feel like one deliberate scene rather than a pile of exports. For more on consistent sets, see our screenshot to mockup workflow.

Realism by channel

The same realism cues matter everywhere, but each channel rewards a slightly different balance. On a landing page hero you can afford a gentle 3D tilt with soft light, since you have room to make it dramatic and readable at once. The frame is large, so a believable shadow really lands.

For app store screenshots, lean flat and honest, because shoppers scan fast and clarity beats drama. A straight-on frame with a calm background reads in a glance, and a soft grounding shadow still keeps it from looking pasted. Save the strong perspective for places where the screen content is simple.

On social, contrast wins, so a bolder background is fine, but the screen must stay the brightest element. A subtle reflection can add a premium feel in a feed, as long as it never fights the content. The lighting rules from Tip 1 hold no matter where the frame ends up.

A quick realism checklist

Before you export, run a five second scan in this order. First, do all highlights and shadows agree on one direction. Second, is the shadow soft and color-matched rather than hard black. Third, does a small contact shadow ground the device on its surface.

Fourth, is the perspective gentle enough that no important UI is cropped. Fifth, is the background calmer than the screen, so the interface stays the star. If every answer is yes, the frame will read as realistic, and you can export with confidence. For the export settings themselves, see our resolution and export guide.

Frequently asked questions

What makes a mockup look realistic?

Consistent light direction, a soft grounding shadow, honest perspective, and a calm background do most of the work. The eye expects light to behave a certain way, and matching that expectation is what sells realism, not fancy assets.

How do I fix a mockup that looks fake?

Check the light first. Make sure highlights and shadows agree on one direction, soften any hard shadow, and add a small contact shadow under the device. Then calm down a busy background so the screen stays the brightest element.

Should device mockups have reflections?

A subtle reflection can add realism on a glossy screen, but keep it faint and low contrast. A strong reflection competes with the interface and makes the content hard to read. When in doubt, use less.

What is the best background for a realistic mockup?

A calm gradient or a muted solid usually works best, since it supports the screen instead of fighting it. If you use a photo, keep it soft and subtle so the interface stays the most detailed thing in the frame.

How much should I tilt a 3D mockup?

A slight tilt of around ten degrees adds energy while keeping the screen readable. Steeper angles look dramatic but crop and warp the interface, which hides the content you are trying to show.

Why does my screen look blurry inside the frame?

The screenshot was probably low resolution or got upscaled. Capture at the highest resolution you can, use real content, and scale down at export rather than up. A clean input is the biggest factor in a sharp result.

Run the do and don't check before every export, and your mockups will look photographed instead of pasted together.