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.

Gratis · In je browser

Stream Alert Maker & CSS Generator

Ontwerp een geanimeerde volger-, sub-, tip- of raid-alert, bekijk hem live en kopieer de CSS en HTML — klaar voor OBS, Streamlabs en StreamElements.

💜

NightRaven volgt je nu!

Heel erg bedankt!

.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-type

Hoofdtekst — gebruik {user} en {amount}

Subtekst

Voorbeeldnaam

Voorbeeldbedrag

Icoon (emoji) & optionele afbeeldings-URL

Font

Hoofdgrootte 30

Icoongrootte 64

Tekst

Highlight

Sub

Box-achtergrond

Radius 16

Glow 18

Entree-animatie

Duur 0.8s

Deze gratis stream alert maker en custom CSS-generator laat je een geanimeerde volger-, abonnee-, tip-, raid- of cheer-alert voor je stream ontwerpen — kopieer daarna de CSS en HTML om te plakken in je alert box op OBS, Streamlabs of StreamElements. Kies je fonts, kleuren, boxstijl en entree-animatie, bekijk het live en lever binnen enkele minuten een strakke eigen alert op. Geen watermerk, alles draait in je browser.

De alert-CSS gebruiken in Streamlabs of StreamElements

Open in de instellingen van je alert box-widget de Custom CSS (Streamlabs) of het CSS-tabblad van de overlay-editor (StreamElements) en plak de hier gegenereerde CSS. De stijlen richten zich op de .alert-box, .alert-main, .alert-sub en .alert-img klassen — hernoem ze als je widget andere elementen gebruikt. Voor een volledig eigen opzet gebruik je de gekopieerde HTML voor een OBS Browser Source als startpunt.

Volger-, sub-, tip-, raid- en cheer-alerts

Wissel van alert-type om een passend standaardbericht te laden en pas daarna de tekst aan. Gebruik de {user} en {amount} tokens waar de naam en waarde van de kijker moeten komen — het live voorbeeld vult je voorbeeldnaam en -bedrag in, zodat je het echt ziet. Je platform zet de juiste tokens erin wanneer de alert afgaat.

Animaties die opvallen

Kies uit fade, slide, pop, bounce, flip en zoom als entree, en stel de duur in. Een beetje beweging laat nieuwe volgers en donaties opvallen zonder afleidend te zijn. Klik op Opnieuw afspelen zo vaak je wilt om de timing te verfijnen.

Veelgestelde vragen

Hoe voeg ik eigen alert-CSS toe aan Streamlabs?

Open je Alert Box-widget, scroll naar Custom CSS en plak de hier gekopieerde CSS. Pas de klassenamen aan als je widget andere gebruikt, sla daarna op en test de alert.

Werkt dit met StreamElements en OBS?

Ja. Plak de CSS in de CSS-editor van je StreamElements-overlay, of gebruik de gekopieerde HTML en CSS samen als OBS Browser Source voor een volledig eigen alert.

Kan ik mijn eigen alert-afbeelding of GIF gebruiken?

Ja. Plak een afbeeldings- of GIF-URL in het afbeeldingsveld en die verschijnt boven de tekst. In het live voorbeeld wordt hij van die URL geladen, en dezelfde URL wordt gebruikt in de geëxporteerde HTML.

Wat betekenen {user} en {amount}?

Dat zijn plaatsvervangers voor de naam van de kijker en de waarde (tipbedrag, bits of raid-kijkers). Het voorbeeld vult je voorbeeldwaarden in; je streamingplatform vervangt ze door echte gegevens zodra een alert afgaat.

Is de alert maker gratis?

Volledig gratis, zonder watermerk. Ontwerp en kopieer zoveel alert-stijlen als je wilt.

Meer gratis tools voor streamers

Bekijk de volledige gratis tools-hub — waaronder een webcam-overlaymaker, een Starting Soon-schermmaker en een fake chat-generator.

Laatst bijgewerkt: juli 2026

Draai alerts & meer met Bregvorn

Een gratis browserdashboard voor Twitch, YouTube & Kick — chat, alerts, events en streamgezondheid op één scherm.

Open Bregvorn — het is gratis