OneTaskBy Tim King · Updated
Animated Banner Maker
Export Ad Banners as GIF or WebM
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the Animated Banner works
This animated banner maker exports GIF or WebM. Write a headline, an optional subline and a button label, choose one of the standard display ad sizes and an entrance effect, and the banner plays in the preview. When it looks right, download it as an animated GIF for email and ad networks that only take images, or as a WebM video for anywhere that plays video. Every frame is drawn and encoded in your browser; nothing is uploaded.
How the animated banner maker works
Most "animated banner" tools either need a design app or render on a server. This one draws the banner on a canvas with the same function for every frame, which means the preview you watch and the file you download are the same pixels. The animation is split into an entrance, during which the headline, subline and button arrive one after another, and a hold, where the finished banner sits still so a reader has time to take it in. Both are set in milliseconds and the total is the length of the exported file.
The sizes are the IAB standard units plus two social formats. Anything under 120 pixels tall is laid out as a single row, headline on the left and button on the right, because stacked text does not fit a leaderboard or mobile banner. Taller units stack the three elements with a short accent rule above the headline, and the font sizes scale from the banner's smaller dimension so the same copy looks balanced at 300 × 250 and 1080 × 1080.
GIF is the safe choice for email and for ad platforms that refuse video, but it is limited to 256 colours per frame. The exporter picks the smallest colour depth at which each frame fits that palette, so flat gradients and text stay clean; a busy photo would not. The frame rate caps file size: 15 frames per second is enough for this kind of motion, and 10 keeps large sizes small. WebM uses your browser's built-in video recorder, which produces a much smaller file at full colour and a smooth frame rate; Safari records MP4 instead, and the download is named accordingly.
Neither format loops on its own timing: GIFs loop forever, which is why the hold period matters, while video players decide for themselves. If a network asks for an HTML5 banner rather than an image or video, build the same effect with the logo reveal or text animation generators linked below and copy the CSS.
FAQ
Why does the GIF look grainy compared with the preview?
GIF allows 256 colours per frame, so a gradient or a photo has to be dithered. Flat colours and text export cleanly; if the background is busy, export WebM instead or simplify the colours.
Why is the video file .mp4 on my Mac?
Safari's recorder produces MP4 rather than WebM. The content is the same and every ad platform that accepts video accepts both; only the extension differs.
How long should the hold be?
Long enough to read the copy twice, usually two to four seconds. GIFs loop straight back to the entrance, so a short hold makes the banner flicker rather than rest.
Can I add a logo or an image?
No, the banner is text, a rule and a button on a plain or gradient background. For a banner built around an image, use a design app and export from there, or animate the headline here and composite the two in a video editor.
See also: all Shadows & Motion tools, Layout & Spacing, Shapes & SVG, UI Components, Forms & Inputs, Colour.
Related tools
Logo Reveal
Animate a wordmark reveal and copy the CSS.
Text Animation
Animate a headline letter by letter and copy the CSS.
Keyframe Timeline
Edit a multi-stop keyframe timeline and export the CSS.
Gradient Maker
Linear, radial and conic CSS gradients with live preview.
Logo Scroller
Build a seamless infinite logo marquee in pure CSS.