How to Export a Claude Animation with a Transparent Background

17 Jul 2026 · 1 min read

Sometimes you don't want a background at all — you want the animated logo, character, or graphic to float over something else: a photo, a slide, a colored hero section. For that you need a transparent video, and MP4 can't do it. Here's the right way.

Use WebM (or GIF) with alpha

Transparency needs an alpha channel, which WebM (VP9) supports and MP4 does not. GIF supports 1-bit transparency (hard edges only). So:

Smooth, anti-aliased edges → WebM.
Simple, hard-edged loop for a chat or README → GIF.

Steps

In your Claude design, make sure the page/element background is actually transparent — no opaque body color behind the animation.
Export from Claude and drop it on claudevideo.app.
Choose WebM, open Advanced, and turn on Transparent background.
Render. The output keeps its alpha channel.

Using it afterward

In an editor (Premiere, After Effects, DaVinci): drop the WebM on a track above your footage — the transparent areas show through.
On the web: a <video> with a WebM source composites over whatever's behind it.
Sanity check: if you see a black or white box instead of transparency, the design had an opaque background — fix that and re-export.

See the format comparison for when to choose WebM vs GIF, then export yours.