How do I add custom alert CSS to Streamlabs?

Open your Alert Box widget, scroll to Custom CSS, and paste the CSS copied here. Adjust the class names if your widget uses different ones, then save and test the alert.

Does this work with StreamElements and OBS?

Yes. Paste the CSS into the StreamElements overlay CSS editor, or use the copied HTML and CSS together as an OBS Browser Source for a fully custom alert.

Can I use my own alert image or GIF?

Yes. Paste an image or GIF URL into the image field and it appears above the text, both in the preview and in the exported HTML.

What do {user} and {amount} mean?

They are placeholders for the viewer name and the value such as tip amount, bits or raid viewers. The preview fills sample values and your platform replaces them with real data when an alert fires.

Is the alert maker free?

Completely free, with no watermark. Design and copy as many alert styles as you like.

Gratis · En tu navegador

Alertas de directo y CSS — generador

Diseña una alerta animada de nuevo seguidor, sub, propina o raid, mírala en directo y luego copia el CSS y el HTML — listo para OBS, Streamlabs y StreamElements.

💜

NightRaven ¡acaba de seguirte!

¡Muchísimas gracias!

.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)} }

Tipo de alerta

Texto principal — usa {user} y {amount}

Texto secundario

Nombre de ejemplo

Cantidad de ejemplo

Icono (emoji) y URL de imagen opcional

Fuente

Tamaño principal 30

Tamaño del icono 64

Texto

Resaltado

Sub

Fondo de la caja

Radio 16

Brillo 18

Animación de entrada

Duración 0.8s

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.

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.

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.

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í. Pega el CSS en el editor de CSS de overlays de StreamElements, o usa juntos el HTML y el CSS copiados como Browser Source de OBS para una alerta totalmente personalizada.

¿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: julio de 2026

Alertas y mucho más con Bregvorn

Un panel gratuito en el navegador para Twitch, YouTube y Kick — chat, alertas, eventos y estado del directo en una sola pantalla.

Abre Bregvorn — es gratis