How do I add custom alert CSS to Streamlabs?

Open your Alert Box widget, scroll to Custom CSS, and paste the CSS copied here. Adjust the class names if your widget uses different ones, then save and test the alert.

Does this work with StreamElements and OBS?

Yes. Paste the CSS into the StreamElements overlay CSS editor, or use the copied HTML and CSS together as an OBS Browser Source for a fully custom alert.

Can I use my own alert image or GIF?

Yes. Paste an image or GIF URL into the image field and it appears above the text, both in the preview and in the exported HTML.

What do {user} and {amount} mean?

They are placeholders for the viewer name and the value such as tip amount, bits or raid viewers. The preview fills sample values and your platform replaces them with real data when an alert fires.

Is the alert maker free?

Completely free, with no watermark. Design and copy as many alert styles as you like.

Kostenlos · In deinem Browser

Stream-Alert-Maker & CSS Generator

Gestalte einen animierten Follower-, Sub-, Tip- oder Raid-Alert, sieh ihn live in der Vorschau und kopiere CSS und HTML — bereit für OBS, Streamlabs und StreamElements.

💜

NightRaven folgt jetzt!

Vielen Dank!

.alert-box{
  display:inline-flex; flex-direction:column; align-items:center; gap:10px;
  font-family:'Inter',sans-serif; text-align:center; padding:4px 8px;
  border-radius:16px; background:transparent;
  box-shadow:0 0 18px #fbbf24, 0 8px 30px rgba(0,0,0,.45);
  animation: bregAlertIn 0.8s cubic-bezier(.2,1.4,.4,1) both;
}
.alert-img{ font-size:64px; line-height:1; }
.alert-img img{ height:64px; width:auto; display:block; }
.alert-main{ font-size:30px; font-weight:700; color:#ffffff; margin:0; }
.alert-main .hl{ color:#fbbf24; }
.alert-sub{ font-size:18px; color:#c9c2d8; opacity:.92; margin:0; }
@keyframes bregAlertIn{ 0%{opacity:0;transform:scale(.6)}70%{opacity:1;transform:scale(1.06)}100%{transform:scale(1)} }

Alert-Typ

Haupttext — nutze {user} und {amount}

Untertext

Beispielname

Beispielbetrag

Icon (Emoji) & optionale Bild-URL

Schrift

Hauptgröße 30

Icon-Größe 64

Text

Hervorhebung

Sub

Box-Hintergrund

Radius 16

Leuchten 18

Eingangsanimation

Dauer 0.8s

Dieser kostenlose Stream-Alert-Maker und Custom-CSS-Generator lässt dich einen animierten Follower-, Abonnenten-, Tip-, Raid- oder Cheer-Alert für deinen Stream gestalten — und kopiere dann das CSS und HTML zum Einfügen in deine Alert-Box bei OBS, Streamlabs oder StreamElements. Wähle Schriften, Farben, Box-Stil und Eingangsanimation, sieh dir alles live an und hast in Minuten einen sauberen eigenen Alert. Kein Wasserzeichen, alles läuft in deinem Browser.

So nutzt du das Alert-CSS in Streamlabs oder StreamElements

Öffne in den Einstellungen deines Alert-Box-Widgets den Custom CSS (Streamlabs) oder den CSS-Tab -Bereich des Overlay-Editors (StreamElements) und füge das hier erzeugte CSS ein. Die Styles zielen auf die .alert-box, .alert-main, .alert-sub und .alert-img -Klassen — benenne sie um, falls dein Widget andere Elemente nutzt. Für einen komplett eigenen Aufbau nutze das kopierte HTML als OBS- Browser Source -Ausgangspunkt.

Follower-, Sub-, Tip-, Raid- und Cheer-Alerts

Wechsle den Alert-Typ, um eine passende Standardnachricht zu laden, und passe den Wortlaut an. Nutze die {user} und {amount} -Tokens dort, wo Name und Wert des Zuschauers erscheinen sollen — die Live-Vorschau setzt deinen Beispielnamen und -betrag ein, damit du das echte Ergebnis siehst. Deine Plattform ersetzt die Tokens beim Auslösen des Alerts durch die richtigen Werte.

Animationen, die auffallen

Wähle zwischen Fade, Slide, Pop, Bounce, Flip und Zoom als Eingang und stelle die Dauer ein. Etwas Bewegung lässt neue Follower und Spenden auffallen, ohne abzulenken. Drücke Erneut abspielen so oft du willst, um das Timing feinzujustieren.

Häufig gestellte Fragen

Wie füge ich eigenes Alert-CSS in Streamlabs ein?

Öffne dein Alert-Box-Widget, scrolle zu Custom CSS und füge das hier kopierte CSS ein. Passe die Klassennamen an, falls dein Widget andere verwendet, dann speichern und den Alert testen.

Funktioniert das mit StreamElements und OBS?

Ja. Füge das CSS in den Overlay-CSS-Editor von StreamElements ein oder nutze das kopierte HTML und CSS zusammen als OBS Browser Source für einen komplett eigenen Alert.

Kann ich ein eigenes Alert-Bild oder GIF verwenden?

Ja. Füge eine Bild- oder GIF-URL in das Bildfeld ein, und sie erscheint über dem Text. In der Live-Vorschau wird sie von dieser URL geladen, und dieselbe URL steht auch im exportierten HTML.

Was bedeuten {user} und {amount}?

Sie sind Platzhalter für den Namen des Zuschauers und den Wert (Trinkgeldbetrag, Bits oder Raid-Zuschauer). Die Vorschau füllt deine Beispielwerte ein; deine Streaming-Plattform ersetzt sie beim Auslösen eines Alerts durch echte Daten.

Ist der Alert-Maker kostenlos?

Komplett kostenlos und ohne Wasserzeichen. Gestalte und kopiere so viele Alert-Stile, wie du willst.

Mehr kostenlose Tools für Streamer

Stöbere im ganzen Hub für kostenlose Tools — darunter ein Webcam-Overlay-Maker, Starting-Soon-Screen-Maker und ein Fake-Chat-Generator.

Zuletzt aktualisiert: Juli 2026

Alerts & mehr betreiben mit Bregvorn

Ein kostenloses Browser-Dashboard für Twitch, YouTube & Kick — Chat, Alerts, Events und Stream-Status auf einem Bildschirm.

Bregvorn öffnen — kostenlos