Enea Xharja

Border Gradient

Wrap your text with an animated border:

<div>
  <p>Text wrapped by an animated border!</p>
</div>
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;
}

Updated on February 08, 2021

Tagged with: css, snippets


Profile picture

Hey there! I'm Enea, a web developer currently working at eqolot. Welcome to my little corner of the web, where I share my personal collection of notes, code snippets, and resources on topics that interest me.

© 2021 Enea Xharja