Cómo hacer que la fuente del navegador sea transparente en OBS Studio

Publicado: 2026-02-19

Entonces agregaste una fuente de navegador en OBS Studio. Lindo. Pero ahora ves un feo cuadro blanco o negro a su alrededor. No es agradable. No te preocupes. Hacer que la fuente de tu navegador sea transparente en OBS es más fácil de lo que crees. Sólo necesitas la configuración correcta. Y tal vez uno o dos pequeños ajustes.

TLDR: para hacer que la fuente de un navegador sea transparente en OBS Studio, su página web debe tener un fondo transparente y OBS no debe forzar un color de fondo. Establezca el fondo de la página en transparente en las propiedades de origen del navegador. Si es necesario, edite el CSS de su superposición para usar background: transparent; . Una vez hecho esto, su superposición se combinará limpiamente con su transmisión.

Primero, ¿qué es una fuente de navegador?

Una fuente de navegador en OBS es un mini navegador web integrado. Carga sitios web directamente en su escena. Esto es perfecto para:

  • Alertas de transmisión
  • Superposiciones de chat
  • Listas de eventos
  • Widgets HTML personalizados
  • Etiquetas de transmisión

En lugar de capturar la pantalla de un sitio web, OBS lo carga directamente. Eso lo hace limpio y nítido. Pero la transparencia sólo funciona si el propio sitio web lo permite.

Ésa es la idea clave. OBS no puede eliminar mágicamente un fondo integrado en la página.

Paso 1: agregue una fuente de navegador en OBS

Si aún no lo has hecho, comencemos desde cero.

  1. Abra OBS Studio.
  2. Ve a tu panel de Fuentes .
  3. Haga clic en el botón + .
  4. Seleccione Navegador .
  5. Nómbralo como quieras.
  6. Haga clic en Aceptar .

Ahora pegue su URL en el campo URL. Establezca el ancho y el alto si es necesario. Luego haga clic en Aceptar.

Ahora debería ver aparecer la fuente de su navegador en la ventana de vista previa.

Si hay una base sólida, sigue leyendo.

Imagen no encontrada en postmeta

Paso 2: asegúrese de que el fondo del sitio web sea transparente

Este es el paso más importante.

Su página superpuesta debe tener un fondo transparente. Si la página usa blanco, negro o cualquier color sólido, OBS lo mostrará.

Si controlas el HTML o CSS, agrega esto:

cuerpo {
  fondo: transparente;
}

O incluso mejor:

html, cuerpo {
  color de fondo: rgba(0, 0, 0, 0);
}

Esto obliga a una total transparencia.

Si está utilizando un servicio de alerta o superposición de terceros, mire dentro de su configuración. Muchos tienen una casilla de verificación que dice algo como:

  • Habilitar fondo transparente
  • Deshabilitar fondo
  • CSS personalizado

Actívelo si está disponible.

De lo contrario, compruebe si puede inyectar CSS personalizado. Eso suele solucionarlo.

Paso 3: Verifique la configuración de origen del navegador OBS

Haga clic derecho en la fuente de su navegador en OBS.

Seleccione Propiedades .

Ahora mire atentamente la configuración.

Cerciorarse:

  • Se pega la URL correcta.
  • El ancho y el alto coinciden con el tamaño de su superposición.
  • Si hay un cuadro CSS personalizado , no fuerza un color de fondo.

Si ve un campo CSS personalizado, también puede agregar:

cuerpo {color de fondo: rgba(0,0,0,0) !importante; }

Haga clic en Aceptar después de los cambios.

Si todo está configurado correctamente, el fondo debería desaparecer.

Problema común: el fondo blanco aún se muestra

Esto sucede mucho.

He aquí por qué:

  • El sitio web tiene un fondo blanco predeterminado.
  • El CSS no se aplicó correctamente.
  • La plataforma superpuesta fuerza el estilo.

Soluciones rápidas:

  1. Actualice la fuente del navegador (haga clic derecho → Actualizar).
  2. Reinicie OBS.
  3. Borre la memoria caché del navegador (dentro de las propiedades fuente del navegador).

Sí, el caché puede causar problemas. Especialmente después de cambiar CSS.

Consejo adicional: utilice PNG y WebM para lograr transparencia

Si la fuente de su navegador muestra imágenes o animaciones, asegúrese de que admitan transparencia.

Mejores formatos:

  • PNG para imágenes
  • WebM con canal alfa para vídeo
  • GIF (calidad limitada, pero funciona)

Si usa MP4, la transparencia no funcionará. MP4 no admite canales alfa.

Esto no es un problema de OBS. Es una limitación de formato.

¿Qué pasa si no puedes editar el sitio web?

A veces no controlas la página.

Quizás sea un widget. O una herramienta de terceros sin opciones de CSS.

Todavía tienes opciones.

Opción 1: usar una clave cromática

Si el fondo es verde brillante u otro color sólido, puedes eliminarlo.

  1. Haga clic derecho en la fuente del navegador.
  2. Seleccione Filtros .
  3. Haga clic en + .
  4. Elija Clave de croma .

Ajuste la configuración hasta que desaparezca el fondo.

Esto funciona mejor con fondos de color verde brillante.

Pero no es perfecto. Los detalles finos pueden verse afectados.

Imagen no encontrada en postmeta

Opción 2: recortarlo

Mantenga presionada la tecla ALT mientras arrastra los bordes de la fuente en OBS.

Esto recorta partes del marco.

Puedes ocultar los bordes del fondo no deseados de esta manera.

Es sencillo. Y rápido.

Método avanzado: para superposiciones HTML personalizadas

Si crea sus propias superposiciones, la transparencia es fácil.

Comience su HTML así:

<!DOCTYPE html>
<html>
<cabeza>
<estilo>
  html, cuerpo {
    margen: 0;
    relleno: 0;
    fondo: transparente;
    desbordamiento: oculto;
  }
</estilo>
</cabeza>
<cuerpo>

<!-- Tu contenido aquí -->

</cuerpo>
</html>

Esto elimina los márgenes y garantiza que la página se mantenga limpia y totalmente transparente.

También evite agregar:

  • Imágenes de fondo
  • Degradados de fondo
  • Colores de tema predeterminados

Mantenlo al mínimo.

OBS se encargará del resto.

Consejos de rendimiento

La transparencia es genial. Pero las fuentes del navegador pueden usar CPU.

Mantenga las cosas tranquilas:

  • Utilice dimensiones de superposición pequeñas.
  • Desactiva animaciones innecesarias.
  • Reduzca la velocidad de fotogramas si no es necesario.
  • Evite JavaScript pesado.

Si una superposición se retrasa, es posible que no sea un problema de transparencia. Puede que sea demasiado complejo.

Lista de verificación rápida de transparencia

Si algo no funciona, revisa esta lista:

  • ¿El fondo del sitio web está configurado como transparente?
  • ¿Usaste fondo: transparente; en CSS?
  • ¿Actualizaste la fuente?
  • ¿Borraste el caché?
  • ¿Los formatos de imagen admiten la transparencia?
  • ¿OBS está actualizado?

La mayoría de los problemas se resuelven en menos de cinco minutos.

Por qué es importante la transparencia

Las superposiciones transparentes parecen profesionales.

Se mezclan con tu escena.

Sin cajas feas.

Sin fronteras extrañas.

Tus alertas flotan naturalmente sobre el juego o la cámara.

Y tu transmisión se verá instantáneamente más limpia.

Pequeño detalle. Gran diferencia.

Pensamientos finales

Hacer transparente la fuente del navegador en OBS Studio no es complicado.

Al principio parece misterioso.

Recuerda la regla de oro:

La transparencia debe provenir del propio sitio web.

OBS mostrará exactamente lo que genera la página. Nada más. Nada menos.

Una vez que tu CSS usa un fondo transparente, OBS hace la magia automáticamente.

Ahora ve a limpiar esas superposiciones.

Tu transmisión lo merece.