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.
Na exportação, você também pode escolher Streamlabs ou StreamElements: o código do Streamlabs usa os próprios ids de elementos e marcadores do Streamlabs, e o StreamElements recebe um widget personalizado pronto (HTML, CSS e JS) que mostra todos os tipos de alerta.
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.
Cada um dos seis tipos de alerta (seguidor, inscrição, subs de presente, doação, raid e cheer) guarda a própria mensagem, segunda linha e ícone, então um único design serve para todos.
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.
São 16 entradas, 11 saídas, uma animação enquanto o alerta está na tela, partículas só com CSS como confete e corações, e 32 visuais prontos para começar.
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. Exporte um widget personalizado do StreamElements pronto (HTML, CSS e JS) que cuida dos seis tipos de alerta, ou copie o CSS e o HTML para qualquer caixa de alertas. O link de teste do OBS reproduz o seu alerta numa fonte de navegador para você conferir tamanho e posição.
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: outubro de 2026