You are currently viewing Create Neon Glow Effects Animation Using HTML And CSS

Create Neon Glow Effects Animation Using HTML And CSS

Create Neon Glow Effects Animation Using HTML And CSS

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.

First, we have to use the box-shadow property to create the glowing light effect, and then use animation together with keyframes to add the repeatedly glowing 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 the 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.

 

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

 

50+ Html, Css & Javascript Projects With Source Code

We have completed our CSS section,  Here is our updated output with CSS. Hope 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.

We hope you enjoy our blog it’s starts with a basic HTML and CSS structure for Neon Glow Light Effect.

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.

Thank You And Happy Learning!!

Written by – Code With Random/Anki

code by – Poonam Soni

 

Leave a Reply