Banner Maker

A banner gets about five seconds

Picture a 300×250 medium rectangle next to an article someone is actually reading. The reader scrolls, the ad enters the viewport, and a few seconds later it is gone. Headline, offer and call to action must land inside that window. That is the constraint an online animated banner maker must serve, and the reason our editor above starts with the dimensions and a duration instead of a blank canvas or a template gallery.

Everything runs online in your browser, and the features are kept deliberately small. You type a headline, a subline and a button label, pick a text effect and a background, set the length, and export the result as GIF, MP4, WebM or an HTML5 ZIP. Nothing is uploaded, there is no account, and the platform is free to use. The back story: the domain carried the Amara Flash banner programs between 2004 and 2016, and the browser tools here are their successors. We are not the original company; more on that on the about page.

The 5-second banner test

Before you touch colors or fonts, run your idea through this test. Each second of a short loop gets a job. A second with no job gets cut; a second with two jobs makes the creative too busy.

1. Second 0 to 1: something moves. Motion is the difference between animated ads and the still image next to them. A single element entering is enough: fade in, slide in from left or right, or pop in for the headline.
2. Second 1 to 2: the headline is readable at a glance. Six words or fewer at 300×250, three or four at 320×50. If you cannot read it on your phone at arm’s length, shorten it.
3. Second 2 to 3: the subline adds the reason. Price, date, benefit or product name. The typewriter or slide up effect works well here, because the eye already sits on the headline.
4. Second 3 to 4: the call to action appears and stays. It should be the last element to arrive and the last to leave.
5. Second 4 to 5: hold or restart. With loop enabled, the sequence restarts cleanly. Without it, the ending must work as a static ad on its own, because late viewers see nothing else.

Set the duration to match: 5 seconds for a tight loop, 8 to 10 seconds if the subline carries a longer offer. The slider covers 3 to 15 seconds, and many ad networks stop animation at 15 seconds and three loops anyway, so staying inside that range avoids rejected creatives.

Which banner ad sizes do you need?

Copy sized for a billboard will not fit a mobile banner, so the dimensions come first. There are nine standard sizes in the editor plus custom dimensions. Treat them as templates for the measurements; the design is still yours. The first six are desktop and mobile ad units, the last three are made for social feeds and stories.

The display units are the fixed units of the IAB New Ad Portfolio. Its Fixed Size Ad Specifications also set initial load weights: 150 kB for a medium rectangle or leaderboard, 250 kB for a billboard or half page, 50 kB for a 320×50 mobile banner, minus 30 % for slow 3G connections.

Build the animation: effects, type and background

Once size and copy are settled, the design part is quick. Each text layer gets one of nine effects: fade in, slide in from left, slide in from right, slide up, typewriter, pop in, sharpen from blur, wave, and a pulsing glow. Which animations and effects you pair matters more than any single pick. A slide in headline with a typewriter subline reads as two beats; two pop in layers landing together read as noise.

Three pairings that hold up when you create animated banners for different placements:

• Headline slide in from left, subline fade in, CTA pop in. Calm and clear, fits all the dimensions.
• Headline sharpen from blur, subline slide up, CTA pulsing glow. Good for launches where the call to action needs attention.
• Headline typewriter, CTA fade in, no subline. Fits a 320×50 mobile banner or a 728×90 leaderboard with no room for a second line.

Fonts come in five families: sans serif, serif, condensed, rounded and monospace. Condensed buys you extra characters in a leaderboard, rounded softens a square social post. The background can be a solid color, a gradient with an adjustable angle that can itself animate, or an image off your computer. A logo or product shot is optional. Keep contrast high, because your design will be viewed on cheap screens in bright rooms.

Which file type for which placement?

The same design exports into the four file types with our editor, and the placement decides which one to pick.

• GIF runs everywhere, including email and ad networks that refuse scripts. With 256 colors per frame it grows fast with gradients and long durations, so keep it short, the palette simple, and watch the file size. If the source is video or photos instead of text, the GIF maker on this site is the better starting point.
• MP4 is for social feeds, stories and video placements. The encoder uses the browser’s WebCodecs API, which works in Chrome, Edge and Safari 16.4 or later. Firefox users get WebM instead.
• WebM is the open video container and plays in all modern browsers.
• HTML5 is what display networks such as Google Ads and most DSPs expect for animated ads. The ZIP holds an index.html, the animation as CSS keyframes, a clickTag wrapper so the network can inject the landing page URL, and a meta ad.size tag declaring the dimensions. There is no JavaScript framework inside, which keeps an HTML5 banner far below the 150 kB initial load limit.

For a longer piece for social, a product video using several photos for example, the slideshow maker handles that with the same MP4 and WebM output.

Questions we hear every time

How long should an animated banner be?

Between 5 and 10 seconds for display, up to 15 for social where people stop and watch.

Is GIF or HTML5 better for banner ads?

HTML5 for anything you buy through an ad network: it stays sharp on retina screens, keeps the file small and takes the click through the clickTag. GIF for email, forums and marketplaces where HTML is stripped.

How to make an animated banner without design software?

You can create the whole creative in our editor from text, a background and an optional image, then export it in whichever file type the placement asks for. If you want to animate a photo itself instead of text over it, use the photo animation tool.

Pre-download checklist

Run through our list once per size before you download:

• [ ] Headline readable within a second on a phone screen
• [ ] Subline carries a concrete reason (price, date, benefit)
• [ ] CTA label is a verb and stays visible until the end
• [ ] Nothing important sits in the outer 10 pixels (ad slots crop)
• [ ] Duration between 5 and 10 seconds, loop on for display
• [ ] Final frame works as a static ad on its own
• [ ] Right file type for the placement: HTML5 for networks, GIF for email, MP4 for social
• [ ] File weight under the network’s limit, ZIP opened once to confirm index.html plays
• [ ] A separate version per size, not a single file stretched

Export, open the file, watch the full loop once. If the call to action is the last thing you remember, your creative passed.