Glowing outline gradient

by PhilQ

HTML

<div class="glowing"><div class="box"></div><div class="glow"></div></div>

SCSS

*, ::before, ::after { margin: 0; padding: 0; box-sizing: border-box; }

body { background: white }

$red: #dc2626;
$blue: #0ea5e9;
$size: 20px;
$hsize: 0.75 * $size;
$dsize: 8 * $size;
$offset: 10px;

.glowing {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: inline-block;
	width: auto;
	height: auto;
	
	.box {
		position: relative;
		display: block;
		width: 500px;
		height: 100px;
		background: #fff;
	}
	
	.glowline {
		position: absolute;
		top: 100%;
		left: 0%;
		width: 100%;
		z-index: -1;
		display: inline-block;
		filter: blur(4px);
		height: 3px;
		background-image: linear-gradient(to right,
		    rgba($red, 0) 0%,
			rgba($red, 1) 10%,
			rgba($blue, 1) 20%,
			rgba($blue, 0) 30%,
			rgba($blue, 0) 100%
		);
		background-position: 0% 0%;
		background-size: 200% 100%;


		animation-name: glowing;
		animation-duration: 5s;
		animation-delay: 0s;
		animation-iteration-count: infinite;
		animation-direction: normal; // alternate;
		animation-timing-function: linear;
		animation-fill-mode: forwards;
		transform: translate(0%, -50%);
	}
}

@keyframes glowing {
	0% { background-position: 200% 0%; }
	50% { background-position: 100% 0%; }
	100% { background-position: 0% 0%; }
}