How to Make an Animated Emoji with a Transparent Background

Why transparency matters for emoji

Slack, Discord, Twitch and Teams all offer dark and light themes, and your emoji will be seen on both. A photo with a white wall behind it shows up as a bright square in dark mode. A dark background disappears into dark mode and turns into a heavy block in light mode.

With the background removed, the only thing left is the subject, so the emoji sits naturally next to the built-in ones. It also reads better at small sizes: without a background competing for attention, a face or silhouette stays recognizable even at the 28 px that Twitch chat uses.

Removing the background usually makes the file smaller too. A large transparent area compresses far better than a detailed backdrop, which helps when you're trying to stay under Slack's 128 KB or Discord's 256 KB limit.

How GIF transparency works (and why edges look hard)

PNG and WebP images store a full alpha channel: every pixel can be anywhere from fully transparent to fully opaque, which is how they get soft, feathered edges. GIF can't do that. In a GIF, each pixel is either completely transparent or completely opaque. There's nothing in between.

So when a soft cutout becomes a GIF, every edge pixel has to be pushed one way or the other. Gifmoji makes pixels that are less than half opaque transparent and keeps the rest. That gives the cleanest result GIF allows, but it explains a few things you might notice:

• Hair and fur get a crisper outline than in the original photo, because wispy strands are either kept or dropped.
• A faint outline of the old background can survive around the edges. Those edge pixels were partly background color in the photo and are now fully opaque. It's most visible when a subject shot against a white wall is viewed in dark mode.
• Curves can look slightly stair-stepped up close. At emoji size this is almost never noticeable.

Animated GIF is still the right choice: it's the one animated format that all four major chat platforms accept for custom emoji. If you only need a still emoji and want the softest possible edges, export a PNG instead. Gifmoji's PNG and WebP options save the first frame as a still image with full transparency.

Removing the background in Gifmoji

1. Upload your photo and crop it around the subject. Cropping first helps, because the cutout only has to handle what's inside the square.
2. In the editor, turn on Remove background. The first time, your browser downloads the background-removal model, which takes a few seconds. After that it runs entirely on your device: the photo is never uploaded.
3. Check the preview. The result is cached, so you can toggle background removal on and off to compare without waiting again.
4. Pick your animation and export with the preset for your platform.

Overlay effects such as :laser-eyes:, :deal-with-it: and :on-fire: benefit most from a cutout. The overlay sits on the subject instead of on a busy room behind it.

Getting a clean cutout

Background removal is good, but it can only separate what the photo makes separable. The biggest improvements come from the photo itself:

• Contrast between subject and background. A dark jacket against a light wall is easy. Brown hair against a brown wooden door is not.
• A plain background. Bookshelves, crowds and patterned wallpaper give the model more chances to keep stray bits.
• Sharp focus. Motion blur and soft focus blend the subject into the background, so the edge becomes a guess.
• Even lighting. Strong shadows falling behind the subject can be mistaken for part of it.
• A whole subject. If a hand or object overlaps the edge of the crop, the cutout will end abruptly there.

More tips on choosing a source image are in how to pick the right photo for an emoji.

Test it on both themes before uploading

Open the downloaded GIF in your browser and look at it on a dark and a light page, or send it to yourself in a direct message and switch your chat app's theme. Look for a light fringe in dark mode or a dark fringe in light mode. If one shows up, a photo with a background closer to the subject's edge color, or with more contrast, usually fixes it.

When to keep the background

Not every emoji needs a cutout. Keep the background when it's part of the joke (a screenshot, a meme frame, a scene), when the subject is a whole place or object that doesn't have a clear outline, or when background removal keeps eating parts of the subject. Effects that move the entire image, like :spin: or :wobble:, work fine with a full square photo.