Where a transparent mockup helps
- Websites: the device sits on the page's own colour or gradient, with no white box around it.
- Presentations: the phone blends into a Keynote or PowerPoint slide.
- Video editing: drop a turning iPhone on top of footage you shot yourself.
- Design files: use it as a layer in Figma or Photoshop.
Where it doesn't
The App Store and Google Play don't accept transparent screenshots. Upload a PNG with an alpha channel and App Store Connect refuses it; Google Play only takes 24-bit PNG or JPEG. Always export store images with a background.
You can't post transparent video to Instagram, TikTok or YouTube either; the platform fills the background with black. Transparent video is for combining with other footage in an editor.
Which format when
Images: PNG
PNG keeps transparency and loses no quality. Its only drawback on the web is size: a 4K phone image can be several megabytes. Converting to WebP before it goes on the page usually cuts the file to about a third, and WebP keeps the transparency.
Video: ProRes 4444
Apple's professional video format. The last 4 in the name stands for the alpha channel. Final Cut Pro, Premiere Pro, DaVinci Resolve and After Effects all open it. Quality is very high and so are file sizes: a few seconds of 4K can run to hundreds of megabytes. It's meant for editing, not for playing on a web page.
Video: WebM (VP9)
The format browsers support for transparent video. Chrome, Firefox and Edge play it, and the files are small. If you want a phone turning on your website with nothing around it, this is the one. Safari's support for transparent WebM is limited, so you may need an HEVC-with-alpha fallback for Safari.
Transparent export in Mockup Center
- Set up the device and scene and put your image or recording on the screen.
- In the export window, switch the background off.
- Pick PNG for images, ProRes 4444 or WebM for video.
- Choose the size, up to 8K.
The shadow comes out transparent too, so the soft shadow under the device takes on the colour of whatever you put it on. That's why it looks natural on light and dark pages alike.
Mistakes we keep seeing
- Uploading a transparent PNG to a store. It gets rejected.
- Putting ProRes on a website. Browsers won't play it, and the file is huge.
- A thin white fringe around the edges. If the edge smoothing was done against white, a halo shows up on dark pages. A tool that exports without a background from the start avoids it.
