Kostenloses Tool
Banner-Generator für HTML5
Der HTML5-Banner-Generator läuft komplett in deinem Browser: Texte eintippen, Farben wählen, Bild dazu — heraus kommt eine fertige Banner-Datei mit ad.size und clickTag. Nichts wird hochgeladen, nichts gespeichert.
Am Rechner geht es leichter. Hier funktioniert alles, aber Vorschau und Eingaben liegen untereinander — auf einem größeren Bildschirm siehst du beides nebeneinander.
1 · Hintergrundbild
2 · Layout
Der Text bekommt die ganze Fläche. Ein Hintergrundbild kannst du trotzdem setzen.
3 · Texte
4 · Farben
Jede Textebene hat ihre eigene Farbe. Ein Rat aus der Praxis: ein Akzent pro Banner reicht — Dachzeile in der Buttonfarbe, Headline neutral, Subline etwas zurückgenommen. Über einem Hintergrundbild kommt automatisch ein weicher Schatten dazu.
5 · Störer
Sitzt oben rechts und pulsiert leicht. Kurz halten — mehr als zwei Wörter passen in keine Form. Auf flachen Formaten wird er weggelassen, dort verdeckt er den Text.
6 · Ecken, Rand & Schatten
Der Rand bleibt durchsichtig und geht von der Fläche ab — die Außenmaße bleiben exakt 300×250, wie es ad.size verlangt. Erst dadurch hat ein Schatten überhaupt Platz; ohne Rand würde er am Bannerrand abgeschnitten und wäre unsichtbar. Auf flachen Formaten wird der Rand automatisch gekappt.
7 · Bewegung
Die Dauerbewegung startet erst, wenn das Einblenden durch ist. Der Button hebt sich beim Hover zusätzlich an, das Bild zoomt leicht. Wer im System „Bewegung reduzieren" aktiviert hat, sieht den Banner still — so gehört sich das.
Das ZIP enthält dein Motiv in allen Formaten — je Größe neu berechnet, nicht bloß skaliert. Google Ads erwartet HTML5-Anzeigen genau so als ZIP.
Erzeugten Code ansehen
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="ad.size" content="width=300,height=250">
<title>Dein Angebot, klar gesagt.</title>
<script>var clickTag = "https://meine-webseite.de";</script>
<style>
*{margin:0;padding:0;box-sizing:border-box}
/* transparent, damit eine durchscheinende Bannerfarbe wirklich durchlässt
statt auf Weiß zu laufen. Der Rand sitzt am body: die Außenmaße bleiben
exakt beim Format, die Fläche rückt nach innen. */
html,body{width:300px;height:250px;overflow:hidden;background:transparent}
body{padding:0px}
/* Immer Flex: sonst nimmt sich der Textblock die volle Höhe und der Button
rutscht unten aus dem Banner. */
.ad{position:relative;display:flex;flex-direction:column;overflow:hidden;cursor:pointer;text-decoration:none;
width:100%;height:100%;border-radius:0px;background:#f4f1ea;color:#16150f;
padding:20px;
font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-user-select:none;user-select:none}
.side{position:relative;z-index:2;flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;}
/* overflow:hidden ist das letzte Sicherheitsnetz: die Größen sind berechnet,
aber fremde System-Schriften laufen minimal anders. Lieber knapp
beschnitten als über den Bannerrand hinaus. */
.in{flex:1;min-width:0;min-height:0;overflow:hidden}
.dach{display:block;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#cf4b26;margin-bottom:6px}
/* Sicherheitsnetz: die Größe ist berechnet, aber Schriften unterscheiden sich
je System. Lieber umbrechen als seitlich rauslaufen. */
.head{display:block;font-size:36px;font-weight:800;line-height:1.04;letter-spacing:-.02em;overflow-wrap:anywhere}
.sub{display:block;margin-top:8px;font-size:14px;line-height:1.35;color:#16150fd1}
/* max-width + Umbruch-Schalter: der Button ist das einzige Element mit
nowrap und damit das einzige, das seitlich ausbrechen könnte. Die Größe ist
berechnet, das hier ist der harte Riegel davor. */
.cta{position:relative;z-index:2;display:inline-block;max-width:100%;align-self:flex-start;
background:#cf4b26;color:#ffffff;font-weight:700;font-size:12px;padding:8px 13px;border-radius:6px;
white-space:nowrap;
transition:transform .2s cubic-bezier(.2,.8,.2,1),filter .2s ease,box-shadow .2s ease}
.ad:hover .cta{transform:translateY(-2px);filter:brightness(1.08);box-shadow:0 6px 16px -8px rgba(0,0,0,.55)}
.ad:active .cta{transform:translateY(0)}
@media (prefers-reduced-motion: no-preference){
.in{animation:ein .55s cubic-bezier(.2,.8,.2,1) both}
.cta{animation:ein .55s cubic-bezier(.2,.8,.2,1) .28s both}
}
@keyframes ein{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
</style>
</head>
<body>
<a class="ad" id="ad" href="https://meine-webseite.de" target="_blank" rel="noopener">
<span class="side">
<span class="in">
<span class="dach">Neu im Sortiment</span>
<span class="head">Dein Angebot,<br>klar gesagt.</span>
<span class="sub">Ein Satz, der den Klick wert ist.</span>
</span>
<span class="cta">Jetzt ansehen</span>
</span>
</a>
<script>
document.getElementById('ad').addEventListener('click', function (e) {
e.preventDefault();
window.open(window.clickTag, '_blank', 'noopener');
});
</script>
</body>
</html>Was der Generator erzeugt
Ein HTML5-Banner ist im Kern eine kleine, in sich geschlossene Webseite mit fester Größe. Zwei Zeilen machen daraus eine Werbeanzeige: das ad.size-Meta, das dem Ad-Server die Maße nennt, und die Variable clickTag, über die er das Klickziel setzt. Beides schreibt der Generator automatisch mit — der Rest ist normales HTML und CSS, das du beliebig weiterbearbeiten kannst.
Das Hintergrundbild wird im Browser auf die Bannergröße zugeschnitten und so weit komprimiert, dass die fertige Datei unter der Google-Ads-Grenze für Bildanzeigen bleibt. Den aktuellen Stand siehst du live über der Vorschau.
Wie Banner aufgebaut sind, welche Größen sich lohnen und welche Fehler am häufigsten passieren, steht ausführlich im Leitfaden zu HTML5-Bannern.
Häufige Fragen
Was kostet der Banner-Generator?
Nichts. Kein Konto, kein Wasserzeichen, keine Registrierung. Das Tool läuft komplett in deinem Browser — dein Bild und deine Texte verlassen deinen Rechner nicht.
Was ist clickTag und warum steht er im Code?
clickTag ist die Variable, über die ein Ad-Server das Klickziel setzt. Der Banner öffnet beim Klick immer window.clickTag statt eines fest verdrahteten Links — deshalb verlangen die meisten Vermarkter genau das. Der Generator schreibt sie automatisch mit hinein.
Wofür ist das ad.size-Meta?
Es teilt dem Ad-Server die Maße des Banners mit, zum Beispiel width=300,height=250. Ohne diese Zeile wird ein HTML5-Banner bei vielen Anbietern abgelehnt.
Wie groß darf die Datei sein?
Bei Google Ads gelten 150 KB für Bildanzeigen und 600 KB für hochgeladene HTML5-Anzeigen als ZIP (Stand August 2026). Der Generator zeigt die aktuelle Größe live an und komprimiert dein Hintergrundbild automatisch so weit, dass die Datei darunter bleibt.
Kann ich den Banner bei Google Ads hochladen?
Für hochgeladene HTML5-Anzeigen erwartet Google ein ZIP-Archiv. Pack die heruntergeladene HTML-Datei dafür einfach in ein ZIP. Beachte, dass der HTML5-Upload bei Google Ads an Konto-Bedingungen geknüpft ist und beantragt werden muss.
Mehr zu Bannern
Das Tool baut den Banner. Warum er wirkt oder eben nicht, steht hier.
Lieber gestaltet statt gebaut?
Individuelle HTML5-Banner — auf Anfrage
Das Tool hier deckt den Standardfall ab. Wenn es mehr sein soll — deine Schrift, deine Bildsprache, animierte Abläufe, ein ganzes Set für eine Kampagne — mache ich das von Hand. Als Designer, nicht als Generator: du sagst mir, was beworben wird, ich schicke dir einen Entwurf.
Schreib mir kurz Format, Anlass und Ziellink — dann melde ich mich mit einem Vorschlag und einem Preis.
Banner anfragenDu brauchst eher die Seite hinter dem Klick? Webdesign ansehen.