Create Text Neon Light Effect Using CSS

 

Welcome to the codewithrandom blog. In this blog, we learn how to Create a Text Neon Light Effect. We use HTML for Text and CSS for this Neon Light text Effect.

I hope you enjoy our blog so let’s start with a basic Html Structure for the Neon Light text Effect.

HTML Code For ext Neon Light Effect

<section>
<div class="container">
<h1 data-text="codewithrandom">codewithrandom</h1>
</div>
</section>

There is all the Html code for the Neon Light text Effect. Now you can see output without Css Code. then we write Css Code for our Neon Light text Effect.

Portfolio Website using HTML and CSS (Source Code)

Html Code Output

CSS Code For ext Neon Light Effect

 @import url("https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600&display=swap");
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html {
font-family: "Nunito";
}
:root {
--var-color: rgb(0, 238, 255);
}
section {
height: 100vh;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: #09111b;
}
.container h1 {
font-size: 4.7rem;
color: var(--var-color);
position: relative;
}
.container h1::before {
position: absolute;
content: attr(data-text);
text-shadow: 0px 0px 20px var(--var-color);
filter: blur(10px) brightness(0);
animation: flicker 2s linear forwards;
animation-delay: 1s;
}
@keyframes flicker {
0% {
filter: blur(5px) brightness(1);
}
3% {
filter: blur(5px) brightness(0);
}
6% {
filter: blur(5px) brightness(0);
}
7% {
filter: blur(5px) brightness(1);
}
8% {
filter: blur(5px) brightness(0);
}
9% {
filter: blur(5px) brightness(1);
}
10% {
filter: blur(5px) brightness(0);
}
20% {
filter: blur(5px) brightness(1);
}
50% {
filter: blur(5px) brightness(1);
}
99% {
filter: blur(5px) brightness(0);
}
100% {
filter: blur(5px) brightness(1);
}
}

Now we complete our Text Neon Light Effect Using HTML and CSS.  Here is our updated output with HTML+ CSS.

Geometric Art Generator using HTML, CSS & JavaScript

Live Preview Of Text Neon Light Effect Using CSS