Esta herramienta gratuita — creador de alertas para directos y generador de CSS personalizado — te permite diseñar una alerta animada de nuevo seguidor, sub, propina, raid o cheer para tu directo — y luego copiar el CSS y HTML para pegarlo en tu alert box de OBS, Streamlabs o StreamElements. Elige tus fuentes, colores, estilo de caja y animación de entrada, míralo en directo y publica una alerta personalizada impecable en minutos. Sin marca de agua, todo funciona en tu navegador.
Cómo usar el CSS de la alerta en Streamlabs o StreamElements
En los ajustes del widget de tu alert box, abre el CSS personalizado (Streamlabs) o la pestaña CSS del editor de overlays (StreamElements) y pega el CSS generado aquí. Los estilos apuntan a las clases .alert-box, .alert-main, .alert-sub y .alert-img — renómbralas para que coincidan con los elementos de tu widget si hace falta. Para una alerta totalmente a medida, usa el HTML copiado como punto de partida de un Browser Source de OBS.
En la exportación también puedes elegir Streamlabs o StreamElements: el código de Streamlabs usa sus propios ids de elementos y marcadores, y StreamElements recibe un widget personalizado listo (HTML, CSS y JS) que muestra todos los tipos de alerta.
Alertas de follow, sub, propina, raid y cheer
Cambia el tipo de alerta para cargar un mensaje por defecto con sentido y luego edita el texto. Usa los tokens {user} y {amount} donde deben aparecer el nombre y el valor del espectador — la vista previa rellena tu nombre y cantidad de ejemplo para que veas el resultado real. Tu plataforma inserta los tokens correctos cuando salta la alerta.
Cada uno de los seis tipos de alerta (seguidor, suscripción, subs regaladas, donación, raid y cheer) guarda su propio mensaje, segunda línea e icono, así que un solo diseño sirve para todos.
Animaciones que llaman la atención
Elige entradas con fundido, deslizamiento, pop, rebote, giro o zoom, y ajusta la duración. Un poco de movimiento hace que los nuevos seguidores y las donaciones destaquen en pantalla sin distraer. Pulsa Repetir tantas veces como quieras para afinar el ritmo.
Hay 16 entradas, 11 salidas, una animación mientras la alerta está en pantalla, partículas solo con CSS como confeti y corazones, y 32 estilos listos para empezar.
Preguntas frecuentes
¿Cómo añado CSS de alerta personalizado a Streamlabs?
Abre tu widget Alert Box, baja hasta Custom CSS y pega el CSS copiado aquí. Ajusta los nombres de clase si tu widget usa otros, y luego guarda y prueba la alerta.
¿Funciona con StreamElements y OBS?
Sí. Exporta un widget personalizado de StreamElements listo (HTML, CSS y JS) que gestiona los seis tipos de alerta, o copia el CSS y el HTML para cualquier caja de alertas. El enlace de prueba OBS reproduce tu alerta en una fuente de navegador para comprobar su tamaño y posición.
¿Puedo usar mi propia imagen o GIF para la alerta?
Sí. Pega la URL de una imagen o un GIF en el campo de imagen y aparecerá encima del texto. En la vista previa se carga desde esa URL, y en el HTML exportado se usa la misma.
¿Qué significan {user} y {amount}?
Son marcadores para el nombre del espectador y el valor (importe de la propina, bits o espectadores del raid). La vista previa rellena tus valores de ejemplo; tu plataforma de streaming los sustituye por datos reales cuando salta una alerta.
¿El creador de alertas es gratis?
Totalmente gratis y sin marca de agua. Diseña y copia todos los estilos de alerta que quieras.
Más herramientas gratuitas para streamers
Explora todo el hub de herramientas gratuitas — con creador de overlays de cámara, creador de pantallas Starting Soon y generador de chat falso.
Última actualización: octubre de 2026