Border Gradient

Wrap your text with an animated border.

In the HTML file:

<div>
  <p>Text wrapped by an animated border!</p>
</div>

In the CSS file:

body {
  background-color: #000;
}

/* define animated gradient */
@keyframes animatedGradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

div {
  position: relative;
}
div:after {
  content: "";
  position: absolute;
  top: calc(-1 * 2px);
  left: calc(-1 * 2px);
  height: calc(100% + 2px * 2);
  width: calc(100% + 2px * 2);
  background: linear-gradient(45deg, #3ddc84, #4285f4);
  border-radius: 0.55rem;
  z-index: -1;
  background-size: 300% 300%;

  /* make border blink */
  animation: animatedGradient 3s ease alternate infinite;
}

p {
  font-size: 40px;
  padding: 20px;
  text-align: center;
  border-radius: 0.55rem;
  background-color: #1c1c1c;
  color: #fff;
  border: 1px solid transparent;
}