Transparent GIFs

With transparent GIFs, you can see through to whatever is behind the GIF and it will look smooth and seamless no matter what the background is set to. However, did you know...transparent GIFs are actually most likely a JSON/Lottie or Video with a transparent background in a loop. Learn more about animated GIFs and browse some examples below.

Can GIFs Be Transparent?

The GIF format has evolved with time, but it is still limited by its inability to be transparent. However, there is hope! There are new formats being developed that will allow GIFs to be transparent, one such format is called “Lottie” and was developed by Airbnb (yes, that Airbnb). 

Search For Yourself

Go on, try it yourself — go to Google and type in Transparent GIFs. Yes, there will be plenty of search results but if you click through to any of the GIFs (and download them) what you’ll find is that they have a grainy border around them that is very pixelated. 

GIFs can technically be exported with what’s called an ‘alpha matte background’ layer which forces them to crop most of the background but leaves a very undesirable grain.

Looping Transparent Animation

Check out the looping gears here, they feature a seamless loop without any animation ‘skip.’ 

Transparent animations, such as this animated icon, are actually a in a web format called “JSON or Lottie.” 

The benefit of a JSON animation over a looping GIF is that these formats will support a fully transparent background and load faster. 

Transparent Background GIFs

A popular request is to overlay an animation over your background or make the background itself animated. For requests like this I typically recommend going the HD video route and embedding the animations where needed. 

Depending on your website setup, it might be worth chatting with developer to get a sense of their capabilities for the installation.

Creation Process

The looping gif-style animation above was created in two separate stages. The design was first created in Adobe Illustrator, which was then imported into Adobe After effects to animate the components. 

Once animated, the coded version was created with transparent background. Learn more about GIFs here

Get In Touch

Questions and Conversations

Submit Your Project Info

Questions, comments or feedback on anything you’ve seen here. I’ll get back to you as soon as possible.