Gratis · I webbläsaren

Stream-alerts & CSS – generator

Designa en animerad alert för follow, sub, tip eller raid, förhandsgranska den live och kopiera sedan CSS och HTML — redo för OBS, Streamlabs och StreamElements.

💜

NightRaven följde precis!

Tack så mycket!

.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)} }
Text
Markering
Sub

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.

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.

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 upp igen hur många gånger du vill för att finjustera tajmingen.

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. Klistra in CSS-koden i StreamElements CSS-redigerare för overlays, eller använd den kopierade HTML- och CSS-koden tillsammans som en OBS Browser Source för en helt egen alert.

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: juli 2026

Kör alerts & mer med Bregvorn

En gratis webbläsarpanel för Twitch, YouTube & Kick — chatt, alerts, events och streamhälsa på en och samma skärm.

Öppna Bregvorn — det är gratis