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.
In de export kun je ook Streamlabs of StreamElements kiezen: de Streamlabs-code gebruikt de eigen element-id's en plaatsaanduidingen van Streamlabs, en voor StreamElements krijg je een kant-en-klare custom widget (HTML, CSS en JS) die elk meldingstype toont.
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.
Elk van de zes meldingstypes (volger, abonnement, cadeau-subs, donatie, raid en cheer) houdt zijn eigen bericht, tweede regel en pictogram, dus één ontwerp dekt ze allemaal.
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.
Er zijn 16 binnenkomsten, 11 vertrekken, een animatie tijdens de weergave, deeltjes in puur CSS zoals confetti en hartjes, en 32 kant-en-klare looks om mee te beginnen.
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. Exporteer een kant-en-klare StreamElements custom widget (HTML, CSS en JS) voor alle zes meldingstypes, of kopieer de CSS en HTML voor elk meldingskader. De OBS-testlink speelt je melding af in een browserbron, zodat je grootte en positie kunt controleren.
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: oktober 2026