Neon Glow Light Effect Animation – Codewithrandom







Neon Glow Light Effect Animation – Codewithrandom

Welcome🎉 to Code With Random blog. We learn how to create Neon Glow Light Effect. We use HTML & CSS  for Neon Glow Light Effect. We hope you enjoy our blog so let’s start with a basic HTML structure for Neon Glow Light Effect.  

HTML code

 <!DOCTYPE html>  
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Glowing</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="container">
<i class="fa fa-diamond" id="diamond"></i>
</div>
</body>
</html>

There is all HTML code for the Neon Glow Light Effect. Now, you can see output without CSS, then we write CSS for the Neon Glow Light Effect.

Output

Neon Glow Light Effect Animation - Codewithrandom

CSS code

 :root {  
--background_color: #0f0f10;
--text-color: rgb(233, 225, 225);
--pink: #ef087b;
--shadeBlue: #2a1c70;
--neon: #01d9fa;
}
body {
height: 100vh;
width: 100vw;
background: var(--background_color);
}
.container {
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
}
#diamond {
padding: 3%;
color: var(--text-color);
font-size: 10em;
border-radius: 10%;
animation: glow 2s linear infinite;
}
@keyframes glow {
from {
text-shadow: 0 0 10px var(--text-color), 0 0 20px var(--text-color), 0 0 30px var(--pink), 0 0 40px var(--pink), 0 0 50px var(--pink), 0 0 60px var(--pink), 0 0 70px var(--pink);
}
to {
text-shadow: 0 0 5px var(--shadeBlue),
0 0 25px var(--shadeBlue),
0 0 50px var(--shadeBlue),
0 0 100px var(--neon);
}
}

We have completed our CSS section,  Here is our final updated output CSS.

Final Output

Neon Glow Light Effect Animation - CodewithrandomNeon Glow Light Effect Animation - Codewithrandom

We have completed our CSS section,  Here is our updated output with CSSHope you like the Neon Glow Light Effect, you can see the output project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕

This post teaches us to create a Neon Glow Light Effect using simple HTML & CSS. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Written by – Code With Random/Anki 

code by – Poonam Soni

Check out more…..

Share on:

Leave a Comment