Neon Glow Border

This is a nice little neon glow border style that can be used on elements in a page to draw attention and its not too much code involved. It can be tweaked in loads of different ways to give some real interesting designs.

View the glowing neon border in action: https://scottsutton.net/additional-files/neon-border.html

The CSS:

.gradient-border {
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  width: 600px;
  min-height: 300px;
  color: white;
  padding: 1.8em;
  margin-top: 5em;
}
.gradient-border {
  --borderWidth: 2px;
  --borderRadius: 20px;
  background: var(--bg-color);
  position: relative;
  border-radius: var(--borderRadius);
}
.gradient-border:after {
  content: '';
  position: absolute;
  top: calc(-1 * var(--borderWidth));
  left: calc(-1 * var(--borderWidth));
  height: calc(100% + var(--borderWidth) * 2);
  width: calc(100% + var(--borderWidth) * 2);
  background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);
  border-radius: var(--borderRadius);
  z-index: -1;
  animation: animatedgradient 3s ease alternate infinite;
  background-size: 300% 300%;
  filter: blur(10px);
}
@keyframes animatedgradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

The HTML:

<div class="gradient-border">
  <p>Box with glowing neon edge</p>
</div>