Vår gratis alert-skapare för streams och generator för egen CSS låter dig designa en animerad alert för follow, sub, tip, raid eller cheer till din stream — och kopiera sedan CSS och HTML för att klistra in i din alert box i OBS, Streamlabs eller StreamElements. Välj fonter, färger, boxstil och entré-animation, se den spelas upp live och skicka ut en snygg egen alert på några minuter. Ingen vattenstämpel, allt körs i din webbläsare.
Så använder du alert-CSS:en i Streamlabs eller StreamElements
I inställningarna för din alert box-widget öppnar du Custom CSS (Streamlabs) eller CSS-fliken i overlay-redigeraren (StreamElements) och klistrar in CSS-koden som genereras här. Stilarna riktar sig mot klasserna .alert-box, .alert-main, .alert-sub och .alert-img — döp om dem så att de matchar elementen i din widget om det behövs. För ett helt eget bygge använder du den kopierade HTML-koden i en OBS Browser Source som utgångspunkt.
I exporten kan du också välja Streamlabs eller StreamElements: Streamlabs-koden använder Streamlabs egna element-id:n och platshållare, och StreamElements får en färdig egen widget (HTML, CSS och JS) som visar alla alerttyper.
Alerts för follow, sub, tip, raid och cheer
Byt alert-typ för att ladda ett vettigt standardmeddelande och redigera sedan texten. Använd {user} och {amount} som tokens där tittarens namn och värde ska stå — förhandsvisningen fyller i ditt exempelnamn och belopp så att du ser hur det blir. Din plattform byter in rätt tokens när alerten utlöses.
Var och en av de sex alerttyperna (följare, prenumeration, gåvoprenumerationer, donation, raid och cheer) har sitt eget meddelande, sin andra rad och sin ikon, så en design täcker alla.
Animationer som fångar blicken
Välj mellan fade, slide, pop, bounce, flip och zoom som entré, och finjustera längden. Lite rörelse får nya följare och donationer att sticka ut på skärmen utan att störa. Tryck på Spela igen hur många gånger du vill för att finjustera tajmingen.
Det finns 16 entréer, 11 utgångar, en animering medan alerten visas, partiklar i ren CSS som konfetti och hjärtan, och 32 färdiga utseenden att börja från.
Vanliga frågor
Hur lägger jag till egen alert-CSS i Streamlabs?
Öppna din Alert Box-widget, scrolla till Custom CSS och klistra in CSS-koden du kopierat här. Justera klassnamnen om din widget använder andra, spara och testa sedan alerten.
Fungerar det med StreamElements och OBS?
Ja. Exportera en färdig egen StreamElements-widget (HTML, CSS och JS) som hanterar alla sex alerttyper, eller kopiera CSS och HTML för valfri alertruta. OBS-testlänken spelar din alert i en webbläsarkälla så att du kan kontrollera storlek och placering.
Kan jag använda en egen alert-bild eller GIF?
Ja. Klistra in en bild- eller GIF-URL i bildfältet så visas den ovanför texten. I förhandsvisningen laddas den från den URL:en, och samma URL används i den exporterade HTML-koden.
Vad betyder {user} och {amount}?
De är platshållare för tittarens namn och värdet (tip-belopp, bits eller antal raid-tittare). Förhandsvisningen fyller i dina exempelvärden; din streamingplattform ersätter dem med riktiga data när en alert utlöses.
Är alert-skaparen gratis?
Helt gratis, utan vattenstämpel. Designa och kopiera hur många alert-stilar du vill.
Fler gratisverktyg för streamers
Utforska hela gratisverktygshubben — bland annat webbkamera-overlayskapare, Starting Soon-skärmskapare och generator för fejkad chatt.
Senast uppdaterad: oktober 2026