How to create CSS Glowing Tubelight Text Animation Effect using HTML and CSS

You may have seen different types of CSS Glowing Tubelight Text Animation Effect in many websites. There are many stylish CSS Glowing Tubelight Text Animation Effect on HTML and CSS. But today, I will show you as a Simple CSS Glowing Tubelight Text Animation Effect using HTML and CSS. This source code is really simple and easy to understand.

CSS Glowing Tubelight Text Animation Effect using HTML and CSS

This CSS Glowing Tubelight Text Animation Effect made with Only HTML & CSS. Copy source code from here.
For creating this project you have to create HTML File. Follow the steps to creating this without any error.

tubelight.html or tubelight.htm

Create an HTML file named ‘tubelight.html‘ and put these codes given below.

tubelight.css

Create an CSS file named ‘tubelight.css‘ and put these codes given below.

/* Code By Coding With Fun */

* {
    font-family: 'Courier New', Courier, monospace;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #07252d;
}
h2 {
    position: relative;
    font-size: 3em;
    letter-spacing: 15px;
    color: #0e3742;
    text-transform: uppercase;
    width: 100%;
    text-align: center;
    -webkit-box-reflect: below 1px 
    linear-gradient(transparent,#008);
    outline: none;
    animation: animate 5s linear infinite;
}
@keyframes animate {
    0%,18%,20%,50%,60%,65%,80%,90%,92% {
        color: #0e3742;
        text-shadow: none;
    }
    18%,20%,50%,60%,65%,80%,90%,92%,100% {
        color: white;
        text-shadow: 0 0 10px #03bcf4,
                    0 0 20px #03bcf4,
                    0 0 40px #03bcf4,
                    0 0 80px #03bcf4,
                    0 0 160px #03bcf4;
    }
}

That’s it. Now you have successfully create CSS Glowing Tubelight Text Animation Effect. If you have any doubt or question comment down below.

I hope this post will useful to you, Thanks For Visiting, Keep Visiting.

How to create CSS Glowing Tubelight Text Animation Effect using HTML and CSS