How to export transparent PNG mockups.
A transparent PNG mockup layers cleanly onto websites, pitch decks, and social graphics — no background to cut out. Protato exports transparency when you set the background to None.
What you'll build
A device mockup with a fully transparent background — the phone, shadow, and text render without any backdrop, ready to drop into any design.
What you'll use
Background tab (None option), Shadow controls, export format picker (PNG), and the aspect ratio canvas.
Step 01
Set your background to None.
Open the Background tab in the Settings sheet (iPhone) or the left sidebar (Mac). Select None as the background type.
The canvas shows a checkerboard pattern — this is the standard indicator for transparency. The checkerboard is not part of the export; it only appears in the editor so you can see where the transparent area is.
Step 02
Adjust the device shadow.
With a transparent background, the device shadow is still rendered. This is useful — it gives the phone depth even when composited onto another design.
Go to the Shadow tab and adjust Opacity (how dark) and Radius (how blurry). A softer shadow (higher radius) blends more naturally onto different backgrounds. If you want a completely flat device without shadow, turn the shadow off.
Step 03
Position and light your device for compositing.
Since the mockup will sit on top of another design, frame the device with extra space around it — leave margin so the compositing tool has room to position it.
Use a neutral camera angle (slightly tilted, not extreme) so the device looks natural in most contexts. Adjust lighting with the Studio preset for balanced, general-purpose lighting that works on any background color.
Step 04
Export as PNG.
Tap the Export button and choose PNG as the format. PNG is the only format that preserves transparency — JPEG does not support alpha channels.
Select your quality scale: 2x or 3x gives you a high-resolution asset that stays sharp when scaled down. The file will be larger than JPEG, but PNG with transparency is the standard for design assets.
Before exporting, verify that your background is still set to None (not Solid, Gradient, or Image). A common mistake is switching backgrounds and forgetting to change back before export.
Step 05
Use your transparent mockup anywhere.
The exported PNG has a transparent background around the device, shadow, and any text you placed. You can now:
- Drop it into a website hero section — the device floats naturally over your page background
- Place it on a colored pitch deck slide without white box edges
- Composite it onto a product photo or lifestyle image in Figma, Photoshop, or Canva
- Use it as an app store screenshot by placing it on a colored background in your design tool
- Share it directly — the transparency makes it look professional wherever it lands
Continue
Build on the transparent asset.
App Store Screenshot Sizes & Requirements 2026.
Need your transparent mockup at the exact pixel dimensions for App Store upload? Check the size reference.
How to polish your mockup with studio lighting and materials.
Make sure your device looks premium from every angle before exporting the transparent version.
How to add text overlays and branding to your mockups.
Text in transparent PNG exports renders cleanly — add headlines that composite onto any background.
