🔮 CSS Magic Text Border Animation
Make your text pop with this mesmerizing animated border effect — no JavaScript needed!
✨ 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
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