Best neon text effect animation with HTML & CSS Source Code

generating preview

<html> <head> <style> body{ font-family:'Verdana', sans-serif; background:#ffffd9; } </style> </head> <body> <h2> Designer Desk Online </h2> <style> @import url(https://fonts.googleapis.com/css?family=Varela+Round); h2 { color: hsla(0, 0%, 0%, .9); font: normal 100px Varela Round, sans-serif; height: 140px; left: 0; letter-spacing: 5px; margin: -80px 0 0 0; position: absolute; text-align: center; text-transform: uppercase; top: 20%; width: 100%; animation: move linear 2000ms infinite; } @keyframes move { 0% { text-shadow: 4px -4px 0 hsla(0, 100%, 50%, 1), 3px -3px 0 hsla(0, 100%, 50%, 1), 2px -2px 0 hsla(0, 100%, 50%, 1), 1px -1px 0 hsla(0, 100%, 50%, 1), -4px 4px 0 hsla(180, 100%, 50%, 1), -3px 3px 0 hsla(180, 100%, 50%, 1), -2px 2px 0 hsla(180, 100%, 50%, 1), -1px 1px 0 hsla(180, 100%, 50%, 1) ; } 25% { text-shadow: -4px -4px 0 hsla(180, 100%, 50%, 1), -3px -3px 0 hsla(180, 100%, 50%, 1), -2px -2px 0 hsla(180, 100%, 50%, 1), -1px -1px 0 hsla(180, 100%, 50%, 1), 4px 4px 0 hsla(0, 100%, 50%, 1), 3px 3px 0 hsla(0, 100%, 50%, 1), 2px 2px 0 hsla(0, 100%, 50%, 1), 1px 1px 0 hsla(0, 100%, 50%, 1) ; } 50% { text-shadow: -4px 4px 0 hsla(0, 100%, 50%, 1), -3px 3px 0 hsla(0, 100%, 50%, 1), -2px 2px 0 hsla(0, 100%, 50%, 1), -1px 1px 0 hsla(0, 100%, 50%, 1), 4px -4px 0 hsla(180, 100%, 50%, 1), 3px -3px 0 hsla(180, 100%, 50%, 1), 2px -2px 0 hsla(180, 100%, 50%, 1), 1px -1px 0 hsla(180, 100%, 50%, 1) ; } 75% { text-shadow: 4px 4px 0 hsla(180, 100%, 50%, 1), 3px 3px 0 hsla(180, 100%, 50%, 1), 2px 2px 0 hsla(180, 100%, 50%, 1), 1px 1px 0 hsla(180, 100%, 50%, 1), -4px -4px 0 hsla(0, 100%, 50%, 1), -3px -3px 0 hsla(0, 100%, 50%, 1), -2px -2px 0 hsla(0, 100%, 50%, 1), -1px -1px 0 hsla(0, 100%, 50%, 1) ; } 100% { text-shadow: 4px -4px 0 hsla(0, 100%, 50%, 1), 3px -3px 0 hsla(0, 100%, 50%, 1), 2px -2px 0 hsla(0, 100%, 50%, 1), 1px -1px 0 hsla(0, 100%, 50%, 1), -4px 4px 0 hsla(180, 100%, 50%, 1), -3px 3px 0 hsla(180, 100%, 50%, 1), -2px 2px 0 hsla(180, 100%, 50%, 1), -1px 1px 0 hsla(180, 100%, 50%, 1) ; } } </style> </body> </html>

How to Use this Elements / Tutorials:

You Can Use Glowing Text effects using HTML & CSS elements by select the above source code (CTRL + A) then copy the code (CTRL + C) and paste (CTRL + V) it in a blank html Page to initially test it. Then you can use the Above Glowing Text effects using HTML & CSS where ever you want for your project.

Usage of Glowing Text effects using HTML & CSS:

You Can Use this elements with creativity whenever you want to to create CSS glow effect animation. CSS neon effect glow animation is design trend now. This type of CSS text glow effect animation easily attract people. You can use this CSS neon effect animation to your website such as event management, kids website or entertainment website. You can use css3 glowing neon text effect animation as per your requirement.