Transparent countdown GIF for email

A GIF with a transparent background lets your email's color or image show behind the digits, so the countdown looks like part of the design instead of a box stuck on top. There's one limit worth knowing before you copy the code: in a GIF, every pixel is either opaque or invisible, with nothing in between.

How transparency works in a GIF

A GIF stores its colors in a palette of at most 256. The GIF89a specification lets the file mark one of those colors as transparent, and pixels of that color aren't painted. Everything else shows at full strength.

There's no partial transparency. A soft shadow or a glow that fades into the background can't be stored in a GIF: each pixel has to be either fully visible or not shown at all.

The edges of the digits

Digits and labels are drawn with smoothed edges. On an opaque background, the edge blends the digit color with the background color and the letter looks clean. In a transparent GIF, the engine doesn't know what color your email is, so the edges have to be blended with some color at render time.

Our engine draws on a magenta key color and then makes that exact color transparent. Edge pixels are a mix of the digit and the magenta, not pure magenta, so they stay opaque with a pink or purple tint. We checked this by rendering GIFs with the engine and placing them on white, black and blue backgrounds:

• With large dark digits on a light email, the edge is a thin line you barely notice.
• On the labels ("DAYS", "HOURS") it shows more, because the letters are small and mostly edge.
• If the digits are close to the background color (dark on a dark email, white on a white one), all you can make out is the colored outline.

To pick a digit color, think about the exact background the timer will sit on. Dark digits on a light email, white digits on a dark one, and labels with enough contrast, because they're the first thing to break down.

If your email has a single solid background color, there's a cleaner option: turn transparency off and set the timer's background to that same color. The edges then blend with the right color and no halo appears. Transparency pays off when the timer sits on top of an image or a gradient.

Which styles support a transparent background

• flat, minimal and serif. The digits are drawn straight onto the transparent background. These blend into the email best.
• blocks, rounded, gradient and flap. Only the space around the cells becomes transparent. The cells are painted a fixed dark gray, so with these styles the digits need to be light.
• glass, ring, neon and bold. Always opaque. If you turn transparency on, the engine ignores it and the GIF goes out with its background.

flat, minimal, blocks, rounded and gradient are on the free plan; flap and serif are Pro.

When the timer expires, you can also make it disappear: instead of the expired message, the engine serves a 1 pixel transparent image.

Dark mode

Some email clients change the message background when the user picks a dark theme. According to Microsoft, with dark mode in Outlook.com and Outlook on the web the reading pane has a dark background, and the "Turn on the lights" button shows the original formatting. In Mail on the Mac, "Use dark backgrounds for messages" shows messages on a dark background when the system is in dark mode.

A transparent GIF shows whatever the client paints behind it. If your digits are dark and the client darkens the background, they lose contrast and the colored edges stand out. Microsoft's and Apple's help pages talk about the message background, not images, so we don't know how each client treats the colors inside a GIF.

That's why the advice is to test:

1. Send yourself a test and open it in Outlook.com with dark mode on, and in Mail on the Mac with dark backgrounds on.
2. If the digits are hard to read, raise the label contrast or use a timer with an opaque background, which carries its own color inside the image.
3. Write the deadline in the email copy too, for anyone who can't read the timer well.

Before you send

Look at the timer where it will actually sit, on your template's background and on a phone, where the edges are seen up close. If the timer sits on an image, check that the digits are readable over both the lightest and the darkest part of it.

If you're pasting it into a specific platform, there are step-by-step guides for Klaviyo, Mailchimp, HubSpot and Shopify Email. And if you want a separate countdown for each recipient, read how the evergreen timer works.