ADVERTISEMENT

Create Text Neon Light Effect Using CSS

Telegram Group Join Now

ADVERTISEMENT

Create Text Neon Light Effect Using CSS

Create Text Neon Light Effect Using CSS
Create Text Neon Light Effect Using CSS

 

ADVERTISEMENT

ADVERTISEMENT

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.

ADVERTISEMENT

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.

ADVERTISEMENT

Portfolio Website using HTML and CSS (Source Code)

Html Code Output

Neon Light text Effect Css | text Effect Css

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.

ADVERTISEMENT

Geometric Art Generator using HTML, CSS & JavaScript

Live Preview Of Text Neon Light Effect Using CSS

Neon Light text Effect Css | text Effect Css

 

ADVERTISEMENT

In this post, we learn how to Create a Text Neon Light Effect Using CSS. If we did a mistake or any confusion please drop a comment so give a reply or help you in easy learning.
 
Written by – codewithrandom/Anki 

ADVERTISEMENT

ADVERTISEMENT

Telegram Group Join Now

Share on:

Leave a Comment

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT