Gratuit · Dans ton navigateur

Alertes de stream & CSS — générateur

Crée une alerte follow, sub, don, raid ou cheer animée, prévisualise-la en direct, puis copie le CSS et le HTML — prêts pour OBS, Streamlabs et StreamElements.

💜

NightRaven vient de te suivre !

Merci beaucoup !

.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)} }
Texte
Surbrillance
Sub

Ce créateur d'alertes de stream et générateur de CSS personnalisé gratuit te permet de créer une alerte follow, sub, don, raid ou cheer animée pour ton stream — puis copie le CSS et le HTML à coller dans ta boîte d'alerte sur OBS, Streamlabs ou StreamElements. Choisis tes polices, tes couleurs, le style de la boîte et l'animation d'entrée, regarde le rendu en direct et publie une alerte personnalisée impeccable en quelques minutes. Sans filigrane, tout tourne dans ton navigateur.

Comment utiliser le CSS d'alerte dans Streamlabs ou StreamElements

Dans les réglages de ton widget d'alerte, ouvre le Custom CSS (Streamlabs) ou l'onglet CSS de l'éditeur d'overlay (StreamElements), puis colle le CSS généré ici. Les styles ciblent les classes .alert-box, .alert-main, .alert-sub et .alert-img — renomme-les pour correspondre aux éléments de ton widget si besoin. Pour un rendu entièrement personnalisé, utilise le HTML copié comme point de départ d'une Browser Source OBS.

Alertes follow, sub, don, raid et cheer

Change le type d'alerte pour charger un message par défaut adapté, puis modifie le texte. Utilise les balises {user} et {amount} là où le nom du spectateur et la valeur doivent apparaître — l'aperçu en direct remplit ton nom et ton montant d'exemple pour que tu voies le rendu réel. Ta plateforme insère les bonnes balises quand l'alerte se déclenche.

Des animations qui attirent l'œil

Choisis parmi les entrées fondu, glissement, pop, rebond, retournement et zoom, et ajuste la durée. Un peu de mouvement fait ressortir les nouveaux followers et les dons sans distraire. Appuie sur Rejouer autant de fois que tu veux pour peaufiner le timing.

Foire aux questions

Comment ajouter du CSS d'alerte personnalisé à Streamlabs ?

Ouvre ton widget Alert Box, descends jusqu'à Custom CSS et colle le CSS copié ici. Ajuste les noms de classes si ton widget en utilise d'autres, puis enregistre et teste l'alerte.

Est-ce que ça marche avec StreamElements et OBS ?

Oui. Colle le CSS dans l'éditeur CSS d'overlay de StreamElements, ou utilise le HTML et le CSS copiés ensemble comme Browser Source OBS pour une alerte entièrement personnalisée.

Puis-je utiliser ma propre image ou mon GIF d'alerte ?

Oui. Colle l'URL d'une image ou d'un GIF dans le champ image et elle apparaît au-dessus du texte. Dans l'aperçu en direct, elle est chargée depuis cette URL, et la même URL est utilisée dans le HTML exporté.

Que signifient {user} et {amount} ?

Ce sont des variables pour le nom du spectateur et la valeur (montant du don, bits ou spectateurs du raid). L'aperçu utilise tes valeurs d'exemple ; ta plateforme de streaming les remplace par les vraies données quand une alerte se déclenche.

Le créateur d'alertes est-il gratuit ?

Entièrement gratuit, sans filigrane. Crée et copie autant de styles d'alerte que tu veux.

Plus d'outils gratuits pour les streamers

Découvre tout le hub d'outils gratuits — dont un créateur d'overlays webcam, un créateur d'écrans Starting Soon et un générateur de faux chat.

Dernière mise à jour : juillet 2026

Gère tes alertes et bien plus avec Bregvorn

Un tableau de bord gratuit dans le navigateur pour Twitch, YouTube & Kick — chat, alertes, événements et santé du stream sur un seul écran.

Ouvrir Bregvorn — c'est gratuit