Animated Neon Text Effect Free | CSS tutorial code

 

Neon text effect

CODE FREE

CSS3
.wrapper{ height: 320px; display: flex; align-items: center; justify-content: center; background: #000000; } .txt{ color: #fff; background: #000; font-size: 50px; font-weight: bold; font-family: Arial; text-transform: uppercase; } .txt::before{ content: 'CODE FREE'; position: absolute; mix-blend-mode: difference; filter: blur(3px); } .neon-wrapper{ display: inline-flex; filter: brightness(200%); overflow: hidden; } .gradient{ background: linear-gradient(149.25442082519896deg, rgba(249, 87, 159,1) 5.046426561620709%,rgba(99, 36, 126,1) 94.35424873382104%); position: absolute; top: 0; left: 0; width: 100%; height: 100%; mix-blend-mode: multiply; } .dodge { background: radial-gradient(circle,#fff,#000000 20%) center / 25% 25%; position: absolute; top: -100%; left: -100%; right: 0; bottom: 0; mix-blend-mode: color-dodge; animation: dodge-area s linear infinite; } @keyframes dodge-area{ to{ transform: translate(50%,50%); } }
HTML 5
<div class="navbar"><span>Neon text effect</span></div> <div class="wrapper"> <div class="neon-wrapper"> <span class="txt">CODE FREE</span> <span class="gradient"></span> <span class="dodge"></span> </div> </div>