Como tornar a fonte do navegador transparente no OBS Studio

Publicados: 2026-02-19

Então você adicionou uma fonte de navegador no OBS Studio. Legal. Mas agora você vê uma feia caixa branca ou preta ao redor dele. Não é legal. Não se preocupe. Tornar a fonte do seu navegador transparente no OBS é mais fácil do que você pensa. Você só precisa das configurações corretas. E talvez um ou dois pequenos ajustes.

TLDR: Para tornar a fonte do navegador transparente no OBS Studio, sua página da web deve ter um fundo transparente e o OBS não deve forçar uma cor de fundo. Defina o plano de fundo da página como transparente nas propriedades de origem do navegador. Se necessário, edite o CSS da sua sobreposição para usar background: transparente; . Uma vez feito isso, sua sobreposição irá se misturar perfeitamente com seu stream.

Primeiro, o que é uma fonte de navegador?

Uma fonte de navegador no OBS é um mininavegador integrado. Ele carrega sites diretamente em sua cena. Isso é perfeito para:

  • Alertas de transmissão
  • Sobreposições de bate-papo
  • Listas de eventos
  • Widgets HTML personalizados
  • Rótulos de fluxo

Em vez de capturar a tela de um site, o OBS o carrega diretamente. Isso o torna limpo e nítido. Mas a transparência só funciona se o próprio site permitir.

Essa é a ideia principal. OBS não pode remover magicamente um plano de fundo inserido na página.

Etapa 1: adicionar uma fonte de navegador no OBS

Se ainda não o fez, vamos começar do zero.

  1. Abra o OBS Studio.
  2. Vá para o painel Fontes .
  3. Clique no botão + .
  4. Selecione Navegador .
  5. Dê o nome que quiser.
  6. Clique em OK .

Agora cole seu URL no campo URL. Defina largura e altura, se necessário. Em seguida, clique em OK.

Agora você deve ver a fonte do seu navegador aparecer na janela de visualização.

Se houver uma base sólida, continue lendo.

Imagem não encontrada no postmeta

Etapa 2: certifique-se de que o plano de fundo do site seja transparente

Este é o passo mais importante.

Sua página de sobreposição deve ter um fundo transparente. Se a página usar branco, preto ou qualquer cor sólida, o OBS irá mostrá-la.

Se você controla o HTML ou CSS, adicione isto:

corpo {
  fundo: transparente;
}

Ou melhor ainda:

html, corpo {
  cor de fundo: rgba(0, 0, 0, 0);
}

Isso força total transparência.

Se você estiver usando um alerta de terceiros ou serviço de sobreposição, consulte suas configurações. Muitos têm uma caixa de seleção que diz algo como:

  • Ativar fundo transparente
  • Desativar plano de fundo
  • CSS personalizado

Ative-o, se disponível.

Caso contrário, verifique se você pode injetar CSS personalizado. Isso geralmente resolve.

Etapa 3: verifique as configurações de origem do navegador OBS

Clique com o botão direito na fonte do seu navegador no OBS.

Selecione Propriedades .

Agora observe atentamente as configurações.

Certificar-se:

  • O URL correto é colado.
  • Largura e Altura correspondem ao tamanho da sobreposição.
  • Se houver uma caixa CSS personalizado , ela não forçará uma cor de fundo.

Se você vir um campo CSS personalizado, também poderá adicionar:

corpo {cor de fundo: rgba(0,0,0,0) !importante; }

Clique em OK após as alterações.

Se tudo estiver configurado corretamente, o fundo deverá desaparecer.

Problema comum: o fundo branco ainda aparece

Isso acontece muito.

Aqui está o porquê:

  • O site tem um fundo branco padrão.
  • O CSS não foi aplicado corretamente.
  • A plataforma de sobreposição força o estilo.

Correções rápidas:

  1. Atualize a fonte do navegador (clique com o botão direito → Atualizar).
  2. Reinicie o OBS.
  3. Limpe o cache do navegador (dentro das propriedades de origem do navegador).

Sim, o cache pode causar problemas. Principalmente depois de alterar o CSS.

Dica bônus: use PNG e WebM para transparência

Se a fonte do seu navegador exibir imagens ou animações, certifique-se de que elas suportam transparência.

Melhores formatos:

  • PNG para imagens
  • WebM com canal alfa para vídeo
  • GIF (qualidade limitada, mas funciona)

Se você usar MP4, a transparência não funcionará. MP4 não oferece suporte a canais alfa.

Este não é um problema de OBS. É uma limitação de formato.

E se você não conseguir editar o site?

Às vezes você não controla a página.

Talvez seja um widget. Ou uma ferramenta de terceiros sem opções de CSS.

Você ainda tem opções.

Opção 1: use um Chroma Key

Se o fundo for verde brilhante ou outra cor sólida, você poderá removê-lo.

  1. Clique com o botão direito na origem do navegador.
  2. Selecione Filtros .
  3. Clique em + .
  4. Escolha Chroma Key .

Ajuste as configurações até que o fundo desapareça.

Isso funciona melhor com fundos verdes brilhantes.

Mas não é perfeito. Detalhes finos podem sofrer.

Imagem não encontrada no postmeta

Opção 2: recortar

Segure ALT enquanto arrasta as bordas da fonte no OBS.

Isso corta partes do quadro.

Você pode ocultar bordas indesejadas do fundo dessa forma.

É simples. E rápido.

Método avançado: para sobreposições HTML personalizadas

Se você criar suas próprias sobreposições, a transparência será fácil.

Comece seu HTML assim:

<!DOCTYPEhtml>
<html>
<cabeça>
<estilo>
  html, corpo {
    margem: 0;
    preenchimento: 0;
    fundo: transparente;
    estouro: oculto;
  }
</estilo>
</head>
<corpo>

<!-- Seu conteúdo aqui -->

</body>
</html>

Isso remove as margens e garante que a página permaneça limpa e totalmente transparente.

Evite também adicionar:

  • Imagens de fundo
  • Gradientes de fundo
  • Cores do tema padrão

Mantenha-o mínimo.

OBS cuidará do resto.

Dicas de desempenho

A transparência é ótima. Mas as fontes do navegador podem usar CPU.

Mantenha as coisas tranquilas:

  • Use pequenas dimensões de sobreposição.
  • Desative animações desnecessárias.
  • Reduza a taxa de quadros se não for necessário.
  • Evite JavaScript pesado.

Se uma sobreposição atrasar, pode não ser um problema de transparência. Pode ser muito complexo.

Lista de verificação rápida de transparência

Se algo não estiver funcionando, consulte esta lista:

  • O plano de fundo do site está definido como transparente?
  • Você usou background: transparente; em CSS?
  • Você atualizou a fonte?
  • Você limpou o cache?
  • Os formatos de imagem suportam transparência?
  • OBS está atualizado?

A maioria dos problemas é resolvida em menos de cinco minutos.

Por que a transparência é importante

As sobreposições transparentes parecem profissionais.

Eles se misturam à sua cena.

Não há caixas feias.

Sem fronteiras estranhas.

Seus alertas flutuam naturalmente no jogo ou na câmera.

E seu stream instantaneamente parece mais limpo.

Pequeno detalhe. Grande diferença.

Considerações Finais

Tornar a fonte do navegador transparente no OBS Studio não é complicado.

Parece misterioso no início.

Lembre-se da regra de ouro:

A transparência deve vir do próprio site.

OBS exibirá exatamente o que a página gera. Nada mais. Nada menos.

Uma vez que seu CSS usa um fundo transparente, o OBS faz a mágica automaticamente.

Agora vá limpar essas sobreposições.

Sua transmissão merece.