Creando una caja de luz difuminada con CSS

Ver ejemplo Descargar

Ya ha pasado un tiempo desde que creamos o desentrañamos algún experimento CSS, hoy le toca el turno de una especie de caja de luz en la zona posterior que el autor llamó (Back Glow) 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.

Definiendo la caja de luz con CSS

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;
}

Definiendo el contenedor difuminado extra con CSS

Como ya hemos empleado en posteriores entradas:

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);
}

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

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

Finalmente definimos las animaciones para el cambio de color del texto y el cambio de posición del contenedor difuminado extra:

@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;
	}
}

Finalmente obtenemos el siguiente resultado:

El ejemplo original lo puedes encontrar en el siguiente enlace: Animated Back Glow by George Hastings.

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: