🔮 CSS Magic Text Border Animation

Make your text pop with this mesmerizing animated border effect — no JavaScript needed!

<h2 class="magic-border">Html_codee Magic</h2>

<style>
body {
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  margin: 0;
}

.magic-border {
  font-size: 2.5rem;
  color: white;
  padding: 1rem 2rem;
  border: 3px solid transparent;
  border-image: linear-gradient(270deg, #ff00cc, #3333ff, #0ff, #ff00cc);
  border-image-slice: 1;
  animation: borderMove 5s linear infinite;
  background-clip: border-box;
  font-family: 'Courier New', monospace;
}

@keyframes borderMove {
  0% {
    border-image-source: linear-gradient(270deg, #ff00cc, #3333ff, #0ff, #ff00cc);
  }
  100% {
    border-image-source: linear-gradient(630deg, #ff00cc, #3333ff, #0ff, #ff00cc);
  }
}
</style>

✨ Use this for headers, nameplates, or anywhere you want dramatic flair.

Follow @Html_codee for more CSS spells daily 💫

#css #animation #border #frontend #htmlcodee #creativecode