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.
Dans l'export, tu peux aussi choisir Streamlabs ou StreamElements : le code Streamlabs utilise les ids d'éléments et variables propres à Streamlabs, et StreamElements reçoit un widget personnalisé prêt à l'emploi (HTML, CSS et JS) qui affiche chaque type d'alerte.
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.
Chacun des six types d'alerte (follow, abonnement, abos offerts, don, raid et cheer) garde son propre message, sa deuxième ligne et son icône : un seul design les couvre tous.
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.
Il y a 16 entrées, 11 sorties, une animation pendant l'affichage, des particules en pur CSS comme des confettis et des cœurs, et 32 styles prêts à l'emploi pour démarrer.
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. Exporte un widget personnalisé StreamElements prêt à l'emploi (HTML, CSS et JS) qui gère les six types d'alerte, ou copie le CSS et le HTML pour n'importe quelle boîte d'alertes. Le lien de test OBS joue ton alerte dans une source navigateur pour vérifier sa taille et sa position.
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 : octobre 2026