Creando un contenedor de luz difuminada con CSS

Hoy le toca el turno de una especie de caja de luz en la zona posterior que el autor llamó (Back Glow), es en resumen un borde difuminado con CSS y degradados y que podemos emplear para promocionar textos, cartas, logos, etc y el resultado queda bastante bien y es que cualquier cambio progresivo con luces de colores difuminados es muy vistoso y podemos ver en la presentación de esta entrada; veamos cómo está compuesto este experimento paso por paso.

Crear un contenedor difuminado en CSS es una de esas técnicas que, bien aplicada, eleva cualquier interfaz sin necesidad de imágenes ni librerías externas. En uno de mis experimentos visuales quise recrear una especie de caja de luz detrás de un elemento (lo que suelen llamar un back glow) y el resultado fue un borde difuminado animado muy vistoso, ideal para destacar textos, cards o incluso logos.

En este artículo te voy a mostrar cómo construir ese efecto paso a paso, usando únicamente CSS: gradientes, blur, pseudo-elementos y animaciones suaves con CSS.

Qué es un contenedor difuminado y cuándo usarlo

Un contenedor difuminado es, básicamente, un elemento visual que parece rodeado o respaldado por una luz suave, un degradado borroso o un resplandor. A diferencia de un box-shadow clásico, el difuminado no es una sombra dura, sino un efecto progresivo.

Este tipo de contenedor es especialmente útil para:

• Destacar cards o bloques importantes
• Llamar la atención sobre textos promocionales
• Enmarcar logos o imágenes
• Crear interfaces modernas con estética glow o neón

En mi caso, buscaba algo más vivo que una simple sombra: un cambio progresivo de colores difuminados que aportara dinamismo.

El efecto “back glow”: una caja de luz creada solo con CSS

La idea del back glow es sencilla: separar el contenido real del efecto visual.
El contenido se mantiene nítido, mientras que el difuminado vive en una capa inferior.

Tras varias pruebas, descubrí que no difuminar el contenedor principal, sino un pseudo-elemento independiente, daba mucho más control sobre el resultado final.

Definiendo el contenedor de luz con CSS: Bordes difuminados

Como siempre, empezamos por las bases, y es definiendo la caja que se superpone a los colores difuminados, para esto creamos un contenedor de las dimensiones que queramos y definimos otros aspectos estéticos como el centrado de texto, color de fondo y la animación que crearemos posteriormente; El CSS es el siguiente:

.back_light {
	position: relative;
	width: 500px;
	height: 500px;
	line-height: 500px;
	text-align: center;
	color: #252B37;
	background-color: #151823;
	animation: textColor 10s ease infinite;
}

Este bloque actúa como referencia para el pseudo-elemento que crearemos después. El position: relative es clave para que todo encaje correctamente.

Definiendo el contenedor difuminado extra con ::after

Crearemos el CSS del contenedor extra, definiendo, posición tamaño y escalado:

.back_light:after {
	position: absolute;
	content: "";
	top: 5vw;
	left: 0;
	right: 0;
	z-index: -1;
	height: 100%;
	width: 100%;
	margin: 0 auto;
	transform: scale(0.75);
}

Escalar ligeramente el pseudo-elemento ayuda a que el glow no sobresalga de forma agresiva, sino que envuelva el contenedor de manera más natural.

Aplicando blur y degradados para el efecto glow

Y ahora le daremos un poco de estilo, este contenedor servirá para mostrar los colores definidos en el gradiente (linear-gradient) de forma progresiva, aplicando filtros blur con solo CSS para hacerlo difuminado, e indicaremos la animación para el desplazamiento de la posición del fondo:

.back_light:after {
	filter: blur(5vw);
	background: linear-gradient(270deg, #0fffc1, #7e0fff);
	background-size: 200% 200%;
	animation: animateGlow 10s ease infinite;
}

Aquí hay dos decisiones importantes:

• El blur se aplica al gradiente, no al contenido
• El background-size ampliado permite animar el color sin cortes bruscos

Este enfoque genera un efecto mucho más limpio que abusar de sombras.

Animación del degradado para un efecto dinámico

Para que el contenedor difuminado no sea estático, finalmente definimos las animaciones para el cambio de color del texto y el cambio de posición del contenedor difuminado extra. Esto crea una sensación de luz en movimiento:

@keyframes animateGlow {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}
@keyframes textColor {
	0% {
		color: #7e0fff;
	}
	50% {
		color: #0fffc1;
	}
	100% {
		color: #7e0fff;
	}
}

Obtenemos el siguiente resultado:

Ahora, haciendo muy pocos cambios en el código fuente que mostramos anteriormente (solo remover el color de fondo del contenedor e incluir el tag img) podemos crear experimentos como el siguiente:

Contenedor difuminado extra con logo de X/Twitter

Contenedor con borde difuminado extra con logo de Apple

Variantes del contenedor difuminado en CSS

Contenedor difuminado sin animación

Si prefieres algo más sobrio o ligero en rendimiento, basta con eliminar la animación:

.back_light::after {
 filter: blur(4vw);
 background: linear-gradient(90deg, #0fffc1, #7e0fff);
}

Ideal para interfaces más minimalistas.

Contenedor con imagen o logo

Una de las pruebas más interesantes fue usar el glow para enmarcar logos.
El único cambio necesario es eliminar el fondo del contenedor principal e incluir una imagen.

Esto funciona muy bien para:

• logos de marca
• iconos grandes
• cabeceras visuales

El efecto se adapta sin tocar el núcleo del código.

Borde difuminado frente a box-shadow tradicional

Aunque box-shadow puede simular algo parecido, tiene limitaciones claras:

• Sombras más duras
• Menos control sobre el color
• Difícil animación

El enfoque con pseudo-elementos y blur ofrece un borde difuminado real, no una sombra disfrazada.

Blur, box-shadow y backdrop-filter: diferencias clave

• filter: blur() Difumina el elemento al que se aplica. Perfecto para efectos glow controlados.
• box-shadow Útil para sombras rápidas, pero limitado para efectos de luz complejos.
• backdrop-filter Difumina lo que hay detrás del elemento. Ideal para glassmorphism, no tanto para glow externo.

En este caso, el blur sobre un pseudo-elemento es la opción más flexible.

Compatibilidad y rendimiento del efecto glow

Este efecto funciona correctamente en navegadores modernos. Para mejorar rendimiento:

• Evita animaciones excesivamente rápidas
• Reduce el valor de blur en móviles
• Ofrece una versión sin animación como fallback

Casos reales de uso: cards, textos y logos

He usado este patrón para:

• Tarjetas destacadas
• Bloques promocionales
• Contenedores con logos de marcas

Con mínimos ajustes, el contenedor difuminado se adapta a cualquier contexto.

Errores comunes al crear contenedores difuminados

• Aplicar blur al contenedor principal
• Usar valores de blur demasiado altos
• No separar capas con z-index
• Confiar solo en box-shadow

Preguntas frecuentes sobre contenedores difuminados en CSS

• ¿Se puede crear un efecto glow sin imágenes?
  • Sí, usando gradientes y blur como has visto.
• ¿Afecta mucho al rendimiento?
  • Solo si abusas de animaciones o valores extremos.
• ¿Funciona en todos los navegadores?
  • En navegadores modernos, sí. Para versiones antiguas, conviene simplificar el efecto.

Conclusión

Crear un contenedor difuminado en CSS no solo es posible sin imágenes, sino que además ofrece un control visual enorme. Separar el contenido del efecto, usar gradientes animados y aplicar blur de forma inteligente permite lograr resultados modernos, reutilizables y muy vistosos.

Si estás buscando una alternativa más potente a box-shadow, este enfoque de back glow es una excelente opción.

Aprende ahora a crear un botón para carga para tu web con CSS.