Gratis · I din browser

Stream-alerts & CSS – generator

Design en animeret alert til follow, sub, tip eller raid, se den live, og kopiér CSS'en og HTML'en — klar til OBS, Streamlabs og StreamElements.

💜

NightRaven fulgte lige!

Tusind tak!

.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
Fremhævning
Sub

Vores gratis stream alert-generator og custom CSS-generator lader dig designe en animeret alert til follower, subscriber, tip, raid eller cheer på din stream — og derefter kopiere CSS'en og HTML'en og indsætte den i din alert box i OBS, Streamlabs eller StreamElements. Vælg dine fonte, farver, boksstil og indgangsanimation, se den spille live, og få en ren, egen alert ud på få minutter. Uden vandmærke, og det hele kører i din browser.

Sådan bruger du alert-CSS'en i Streamlabs eller StreamElements

I indstillingerne for din alert box-widget åbner du Custom CSS (Streamlabs) eller CSS-fanen i overlay-editoren (StreamElements), og indsætter den CSS, der genereres her. Stilene retter sig mod klasserne .alert-box, .alert-main, .alert-sub og .alert-img — giv dem nye navne, så de matcher elementerne i din widget, hvis det er nødvendigt. Til en helt egen opsætning bruger du den kopierede HTML i en OBS Browser Source som udgangspunkt.

Alerts til follower, sub, tip, raid og cheer

Skift alert-type for at indlæse en fornuftig standardbesked, og redigér så teksten. Brug {user} og {amount} som pladsholdere, dér hvor seerens navn og værdi skal stå — den direkte forhåndsvisning udfylder dit eksempelnavn og -beløb, så du kan se, hvordan det rent faktisk bliver. Din platform indsætter de rigtige tokens, når alerten udløses.

Animationer, der fanger blikket

Vælg mellem fade, slide, pop, bounce, flip og zoom som indgang, og justér varigheden. Lidt bevægelse får nye følgere og donationer til at poppe på skærmen uden at forstyrre. Tryk på Spil igen lige så mange gange, du vil, for at finjustere timingen.

Ofte stillede spørgsmål

Hvordan lægger jeg egen alert-CSS ind i Streamlabs?

Åbn din Alert Box-widget, rul ned til Custom CSS, og indsæt den CSS, du har kopieret her. Justér klassenavnene, hvis din widget bruger andre, og gem og test så alerten.

Virker det med StreamElements og OBS?

Ja. Indsæt CSS'en i StreamElements' CSS-editor til overlays, eller brug den kopierede HTML og CSS sammen som en OBS Browser Source til en helt egen alert.

Kan jeg bruge mit eget alert-billede eller min egen GIF?

Ja. Indsæt en URL til et billede eller en GIF i billedfeltet, så vises den over teksten. I den direkte forhåndsvisning hentes den fra den URL, og samme URL bruges i den eksporterede HTML.

Hvad betyder {user} og {amount}?

De er pladsholdere for seerens navn og værdien (tip-beløb, bits eller raid-seere). Forhåndsvisningen udfylder dine eksempelværdier; din streamingplatform erstatter dem med rigtige data, når en alert udløses.

Er alert-generatoren gratis?

Helt gratis og uden vandmærke. Design og kopiér lige så mange alert-stile, du vil.

Flere gratis værktøjer til streamere

Se hele den gratis værktøjssamling — heriblandt overlay-generator til webcam, generator til Starting Soon-skærme og fake chat-generator.

Sidst opdateret: juli 2026

Kør alerts & mere med Bregvorn

Et gratis browserpanel til Twitch, YouTube & Kick — chat, alerts, begivenheder og streamens tilstand på én skærm.

Åbn Bregvorn — det er gratis