Skip to content
charmotion
Get started

Transparent Animated Logo: Formats, Editors, Slides and OBS

By the Charmotion team · Updated

Cover illustration for the guide: Transparent Animated Logo: Formats, Editors, Slides and OBS, with Charmotion demo characters

An animated logo stays transparent only in a format with an alpha channel: MOV with HEVC alpha or ProRes 4444 for editors and Apple apps, WebM with VP9 alpha for Chrome, Firefox and OBS, or GIF with hard-edged 1-bit transparency. MP4 has no alpha, so the background always comes out solid, usually black.

Key takeaways

  • MP4 (H.264) cannot be transparent. Use MOV (HEVC alpha or ProRes 4444), WebM (VP9 alpha) or, for simple cases, GIF.
  • A black background usually means the file has no alpha, or the app ignores it.
  • ProRes 4444 is the most widely accepted transparent format in editors; HEVC alpha is smaller and native to Apple apps.
  • Canva's transparent download covers PNG, SVG and GIF, not MP4, and requires a paid plan.
  • OBS plays transparent WebM in a Media Source.

Already have a character or logo? See your character in real app screens: splash, onboarding, loading and empty-state screens. It's free, runs in your browser and uploads nothing.

Which video formats keep a logo's transparent background?

Only formats that store an alpha channel: a fourth value per pixel that says how see-through it is. A normal MP4 does not have one, so a "transparent" logo exported to MP4 always lands on a solid color.

FormatTransparencyWorks well inWatch out for
MOV, HEVC with alphaSmooth (8-bit) alphaSafari, iPhone and iPad, Keynote, Final Cut Pro, macOS appsMostly an Apple format; not transparent in Firefox
MOV, ProRes 4444Smooth alphaMost professional editorsVery large files
WebM, VP9 with alphaSmooth (8-bit) alphaChrome, Edge, Firefox, OBSSafari plays it but drops the alpha
GIFOn or off per pixelAlmost everythingJagged edges, halos, at most 256 colors
MP4 (H.264)NoneEverythingAlways opaque

Apple's WWDC19 session on HEVC with alpha says playback "is supported in iOS 13, tvOS 13 and macOS Catalina." MDN notes that for VP9, "Safari does not support alpha transparency in this format." For GIF, MDN explains that pixels are opaque unless their color is the one marked transparent, in which case they are "entirely transparent." There is nothing in between, which is why soft edges look rough.

For putting a transparent logo on a web page, see transparent video on a website.

Why does my transparent logo show a black background?

Almost always for one of four reasons:

  1. The file has no alpha. Apple's Keynote guide puts it directly: "H.264 doesn't support alpha channels, so transparency is converted to a black background." Any MP4 export of a transparent design does this.
  2. The app ignores the alpha. Apple says "an HEVC player that does not understand Alpha will display only the base video layer," which is the logo on black. Safari does the same with VP9 alpha in WebM.
  3. A setting strips it. Premiere Pro's Interpret Footage dialog has an "Ignore Alpha Channel" option that, per Adobe, "will reveal black pixels instead of the background video."
  4. An older system. Apple's Keynote guide notes that macOS versions earlier than 10.15 do not support transparency in HEVC and ProRes movies.

To see whether the file itself is transparent, drop it into the free transparent video checker, which plays it over a checkerboard in your browser. If the file is fine, the problem is the app, and switching to ProRes 4444 usually fixes it.

Can Canva export a transparent animated logo?

Only as a GIF. Canva's help center lists transparent downloads for PNG, SVG and GIF, and says that downloading with a transparent background "is only available to Canva Pro, Canva Teams, Canva Business, Canva Education, and Canva for Nonprofits plans." Its video download options are MP4 and GIF, and MP4 is not transparent.

ToolTransparent animated exportPlan
CanvaGIF only (1-bit edges)Pro, Teams and other paid plans
Adobe ExpressNot in GIF ("transparent background aren't supported in GIF exports"); no official page on transparent video exportNot applicable
JitterWebM, MOV (ProRes 4444) or GIFMax and Ultra plans
MorphLogoMOV (ProRes 4444), made by green-screen keyingPaid plans
After EffectsProRes 4444 with alpha, among othersCreative Cloud subscription

Adobe Express can import a transparent video as ProRes 4444, so you can bring a transparent logo into an Express project even though you cannot export one from it. Sources: Canva, Adobe Express, Jitter, MorphLogo.

How do you use a transparent logo in Final Cut Pro, Premiere Pro or DaVinci Resolve?

Put it on a track above your footage. The editor then composites it using its alpha channel. What each app documents:

EditorWhat the docs saySafest file
Final Cut ProImports "Apple ProRes (all versions)" and HEVC. A connected clip "is composited over the primary storyline video clip, with the alpha channel controlling the opacity of its clip."HEVC alpha MOV or ProRes 4444
Premiere ProImports HEVC; respects alpha unless "Ignore Alpha Channel" is set. WebM is not on Adobe's import list, and Adobe community experts report that Premiere does not read WebM alpha.ProRes 4444
DaVinci ResolveThe Resolve 21 codec list shows ProRes 4444 with alpha and lists VP9 decoding only in MOV and MP4, not WebM.ProRes 4444

Apple documents HEVC alpha playback and encoding for its own apps (Compressor 4.4.5 "supports HEVC playback with alpha channel"), but none of the three editors' guides states outright that an imported HEVC-alpha file keeps its transparency. If a logo shows on black in your editor, convert it to ProRes 4444; it is larger, but every professional editor reads it.

The steps for placing, sizing and fading a corner logo are in how to add an animated logo to a video.

How do you add a transparent animated logo to OBS?

Use a Media Source with a transparent WebM. OBS added "support for decoding alpha webm files with the media source" in version 17.0.1, and its knowledge base lists .webm, .mov, .mp4 and .gif among Media Source formats.

  1. In the Sources panel, add a Media Source and choose your WebM file.
  2. Turn on Loop for an idle loop, or leave it off for a one-time intro.
  3. Resize and position the source in the preview, usually in a corner that your overlay leaves free.
  4. For a logo that should react to events, a Browser Source is the alternative: OBS sets its page background to transparent by default, so a web page with a Rive file or video works as an overlay.

If the WebM shows a black box, check that it was encoded with alpha (VP9 with a yuva420p pixel format) and not flattened during export.

Do iMovie and CapCut support transparent logos?

Neither documents it, so do not count on it.

  • iMovie on the Mac has picture-in-picture and cutaway effects with an opacity slider, and iMovie on iPhone offers overlay types including picture in picture. Apple's iMovie guides say nothing about video with an alpha channel.
  • CapCut: we found no official CapCut page saying it keeps a video's alpha channel.

Test with a short clip before building an edit around it. If transparency is lost, the reliable fallbacks are a logo on a solid background that matches your video, or a green-screen version keyed out with the app's green-screen effect.

Can you use a transparent animated logo in Keynote, PowerPoint or Google Slides?

Keynote, yes: it supports transparency in HEVC and ProRes movies on macOS 10.15 and later. One caution from Apple's community forums: Keynote 13.2 had a known fault where a transparent ProRes 4444 movie showed a white background instead, so test after updates.

PowerPoint and Google Slides are less predictable. Microsoft does not document alpha video playback in PowerPoint, and Google Slides only inserts video from YouTube, a URL or Google Drive. An animated GIF is the safe choice in both. Details per app are in animated logos in presentations.

Which Charmotion files are transparent?

Only the video files on the paid plans (from $20/month): WebM with VP9 alpha for Chrome, Firefox and OBS, and MOV with HEVC alpha for Final Cut Pro, Keynote, Safari and iOS. For editors that need ProRes 4444, convert the MOV or WebM yourself. The Rive file is transparent too.

The MP4 and GIF files in every set come on a solid background. Charmotion does not deliver a transparent GIF. If you need one, convert it from the transparent WebM and expect 1-bit edges and some halo risk; for chat apps and the web, WebM or APNG keeps the edges smoother.

Frequently asked questions

Can a GIF logo have a transparent background?

Yes, but each pixel is either fully transparent or fully opaque, so soft edges become jagged or keep a fringe of the color they were flattened against. It works for simple flat logos on a known background color; use video with alpha for anything with shadows or gradients.

Why does my transparent MOV look fine on my Mac but black in my editor?

Your Mac's player understands HEVC alpha, but the editor may only read the base video layer, which Apple says is what players that do not understand alpha display. Convert the file to ProRes 4444, which professional editors read with transparency.

Is ProRes 4444 or HEVC alpha better for a logo?

HEVC alpha is far smaller and plays natively in Safari, iOS, Keynote and Final Cut Pro. ProRes 4444 is much larger but the most widely accepted transparent format in editors like Premiere Pro and DaVinci Resolve. Keep both if your logo goes to several teams.

Quick answers from this guide

Sources

Related guides