Gratis · I nettleseren

Stream alerts & CSS – generator

Design en animert alert for follow, sub, tip eller raid, se den live, og kopier CSS-en og HTML-en — klar for OBS, Streamlabs og StreamElements.

💜

NightRaven fulgte deg nettopp!

Tusen takk!

.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)} }
Tekst
Utheving
Sub

Denne gratis stream alert-generatoren og custom CSS-generatoren lar deg designe en animert alert for follower, subscriber, tip, raid eller cheer til streamen din — og kopiere CSS-en og HTML-en og lime den inn i alert-boksen din i OBS, Streamlabs eller StreamElements. Velg fonter, farger, boksstil og inngangsanimasjon, se den spille av live, og få ut en ren, egendefinert alert på minutter. Uten vannmerke, og alt kjører i nettleseren din.

Slik bruker du alert-CSS-en i Streamlabs eller StreamElements

I innstillingene for alert box-widgeten åpner du Custom CSS (Streamlabs) eller CSS-fanen i overlay-editoren (StreamElements) og limer inn CSS-en som genereres her. Stilene retter seg mot klassene .alert-box, .alert-main, .alert-sub og .alert-img — gi dem nye navn så de matcher elementene i widgeten din om nødvendig. For et helt eget oppsett bruker du den kopierte HTML-en i en OBS Browser Source som utgangspunkt.

Alerts for follow, sub, tip, raid og cheer

Bytt alert-type for å laste inn en fornuftig standardmelding, og rediger så teksten. Bruk {user} og {amount} som plassholdere der seerens navn og verdi skal stå — live-forhåndsvisningen fyller inn eksempelnavnet og -beløpet ditt, så du ser hvordan det faktisk blir. Plattformen din setter inn riktige tokens når alerten utløses.

Animasjoner som fanger oppmerksomhet

Velg mellom fade, slide, pop, sprett, flip og zoom som inngang, og juster varigheten. Litt bevegelse får nye følgere og donasjoner til å poppe på skjermen uten å forstyrre. Trykk Spill av på nytt så mange ganger du vil for å finjustere timingen.

Ofte stilte spørsmål

Hvordan legger jeg inn egen alert-CSS i Streamlabs?

Åpne Alert Box-widgeten, bla ned til Custom CSS, og lim inn CSS-en du kopierte her. Juster klassenavnene hvis widgeten din bruker andre, og lagre og test alerten.

Fungerer dette med StreamElements og OBS?

Ja. Lim CSS-en inn i CSS-editoren for overlays i StreamElements, eller bruk den kopierte HTML-en og CSS-en sammen som en OBS Browser Source for en helt egendefinert alert.

Kan jeg bruke mitt eget alert-bilde eller min egen GIF?

Ja. Lim inn en URL til et bilde eller en GIF i bildefeltet, så vises den over teksten. I live-forhåndsvisningen lastes den fra den URL-en, og samme URL brukes i den eksporterte HTML-en.

Hva betyr {user} og {amount}?

De er plassholdere for seerens navn og verdien (tip-beløp, bits eller raid-seere). Forhåndsvisningen fyller inn eksempelverdiene dine; strømmeplattformen din bytter dem ut med ekte data når en alert utløses.

Er alert-generatoren gratis?

Helt gratis, uten vannmerke. Design og kopier så mange alert-stiler du vil.

Flere gratisverktøy for streamere

Utforsk hele den gratis verktøysamlingen — blant annet overlay-generatoren for webkamera, generatoren for Starting Soon-skjerm og generatoren for falsk chat.

Sist oppdatert: juli 2026

Kjør alerts & mer med Bregvorn

Et gratis nettleserdashbord for Twitch, YouTube & Kick — chat, alerts, hendelser og streamhelse på én skjerm.

Åpne Bregvorn — det er gratis