Animated CSS gradient border

by Julien Roche

HTML

<body class="main">
  <article class="main__content">My Awesome border effect</article>
</body>

CSS

:root {
  --border-width: 5px;
}

html,
body {
  border: none;
  height: 100vh;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  width: 100vw;
}

.main {
  align-items: center;
  background-color: black;
  display: flex;
  justify-content: center;
}

.main__content {
  background-color: black;
  border-radius: calc(2 * var(--border-width));
  color: white;
  font-size: 3rem;
  padding: 2rem;
  position: relative;
}

.main__content:after {
  animation: animatedgradient 3s ease alternate infinite;
  background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);
  background-size: 300% 300%;
  border-radius: calc(2 * var(--border-width));
  content: "";
  height: calc(100% + var(--border-width) * 2);
  left: calc(-1 * var(--border-width));
  position: absolute;
  top: calc(-1 * var(--border-width));
  width: calc(100% + var(--border-width) * 2);
  z-index: -1;
}

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