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.

Grátis · No seu navegador

Criador de Alertas para Live e CSS Gerador

Crie um alerta animado de seguidor, sub, doação ou raid, veja ao vivo e copie o CSS e o HTML — prontos para OBS, Streamlabs e StreamElements.

💜

NightRaven acabou de seguir!

Muito obrigado!

.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 — use {user} e {amount}

Subtexto

Nome de exemplo

Valor de exemplo

Ícone (emoji) e URL de imagem (opcional)

Fonte

Tamanho principal 30

Tamanho do ícone 64

Texto

Destaque

Sub

Fundo da caixa

Raio 16

Brilho 18

Animação de entrada

Duração 0.8s

Este criador de alertas para live e gerador de CSS personalizado permite criar um alerta de seguidor, assinante, doação, raid ou cheer para a sua live — depois copie o CSS e HTML para colar na sua caixa de alertas no OBS, Streamlabs ou StreamElements. Escolha as fontes, cores, estilo de caixa e animação de entrada, veja tocar ao vivo e entregue um alerta personalizado em minutos. Sem marca d'água, tudo roda no seu navegador.

Como usar o CSS de alerta no Streamlabs ou StreamElements

Nas configurações do widget de alertas, abra o CSS personalizado (Streamlabs) ou a aba CSS do editor de overlay (StreamElements) e cole o CSS gerado aqui. Os estilos miram as classes .alert-box, .alert-main, .alert-sub e .alert-img — renomeie-as para combinar com os elementos do seu widget, se precisar. Para algo totalmente personalizado, use o HTML copiado como uma Browser Source como ponto de partida.

Alertas de seguidor, sub, doação, raid e cheer

Troque o tipo de alerta para carregar uma mensagem padrão coerente e depois edite o texto. Use os {user} e {amount} onde o nome e o valor do espectador devem aparecer — a pré-visualização preenche com seu nome e valor de exemplo para você ver o resultado real. Sua plataforma coloca os valores corretos quando o alerta dispara.

Animações que chamam atenção

Escolha entradas de fade, deslizar, pop, quicar, girar e zoom, e ajuste a duração. Um pouco de movimento faz os novos seguidores e doações saltarem na tela sem distrair. Clique em Repetir quantas vezes quiser para ajustar o tempo.

Perguntas frequentes

Como adiciono CSS de alerta personalizado ao Streamlabs?

Abra seu widget de Caixa de Alertas, vá até CSS Personalizado e cole o CSS copiado aqui. Ajuste os nomes das classes se o seu widget usar outros, depois salve e teste o alerta.

Funciona com o StreamElements e o OBS?

Sim. Cole o CSS no editor de CSS de overlay do StreamElements, ou use o HTML e o CSS copiados juntos como Fonte de Navegador do OBS para um alerta totalmente personalizado.

Posso usar minha própria imagem ou GIF de alerta?

Sim. Cole a URL de uma imagem ou GIF no campo de imagem e ela aparece acima do texto. Na pré-visualização ao vivo ela carrega dessa URL, e a mesma URL é usada no HTML exportado.

O que significam {user} e {amount}?

São marcadores para o nome do espectador e o valor (quantia da doação, bits ou espectadores da raid). A pré-visualização preenche com seus valores de exemplo; sua plataforma substitui por dados reais quando o alerta dispara.

O criador de alertas é gratuito?

Totalmente gratuito e sem marca d'água. Crie e copie quantos estilos de alerta quiser.

Mais ferramentas gratuitas para streamers

Veja todas as central de ferramentas gratuitas — incluindo um criador de overlay de webcam, um criador de tela de Começando em Breve e um gerador de chat falso.

Última atualização: julho de 2026

Rode alertas e muito mais com o Bregvorn

Um painel gratuito de navegador para Twitch, YouTube e Kick — chat, alertas, eventos e saúde da transmissão em uma só tela.

Abrir a Bregvorn — é grátis