CSS Glow Effect - Glowing Animation Effect using CSS
20 Jun 2022Glowing Animation Effect is one of the top animation in CSS. Lightings and glow effects always set the right ambiance to your website.
It's verry simple to add glow effect to any element in css by using text-shadow and box-shadow property to create the neon light, and then use animation together with keyframes to add the repeatedly glowing effect.
Table of Contents
1. Basic Setup with Required Plugins
Let us start by defining the basic HTML structure of the web page.
- Create an Html and CSS files.
- Include Font-Awesome plugin.
- Set 0 for margin and padding of all element in CSS files.
- Define height, width and background of the document body.
The basic project structure as follows.
Html
Copy
<!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>CSS Glowing Icons</title>
<link rel="stylesheet" href="Index.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
</head>
<body>
<div class="container">
<i class="fa fa-apple" id="apple"></i>
<i class="fa fa-twitter" id="twitter"></i>
<i class="fa fa fa-github-square" id="github"></i>
<i class="fa fa-facebook-square" id="facebook"></i>
</div>
</body>
</html>
CSS
Copy
*{
margin: 0;
padding: 0;
}
body{
width: 100%;
height: 100vh;
background: #18191f;
}
2. Create Icon Boxes
- Create a container to aligh icon buttons.
- Add icons like apple, twitter, github and facebook of Font-Awesome.
- Using display: flex; property boxes can aligh Horizontally.
Implementation of Icon Boxes as follows.
Html
Copy
<div class="container">
<i class="fa fa-apple" id="apple"></i>
<i class="fa fa-twitter" id="twitter"></i>
<i class="fa fa fa-github-square" id="github"></i>
<i class="fa fa-facebook-square" id="facebook"></i>
</div>
CSS
Copy
.container{
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
#apple, #twitter, #github, #facebook{
font-size: 8em;
padding: 10px 20px;
margin: 0 40px;
background: #18191f;
color: #fff;
border-radius: 30px;
}
3. Add Glow Light Effect
- It's very simple to make glow for any html element.
- Using box-shadow, glow light effect applies around the icon's box.
- Adding multiple sets make more glow.
- You can add inset properties to make glow inside.
- Also use text-shadow to add glow light around the icon's font or letter.
Implementation of Add Glow Light Effect as follows.
CSS
Copy
#apple, #twitter, #github, #facebook{
box-shadow: 2px 2px 2px #00000080,
10px 10px 12px #00000080,
inset 2px 2px 10px #00000080,
inset 2px 2px 10px #00000080,
inset 2px 2px 10px #00000080,
inset 2px 2px 10px #00000080;
text-shadow: 0px 0px 50px #0072ff,
0px 0px 100px #0072ff,
0px 0px 150px #0072ff,
0px 0px 200px #0072ff;
}
4. Animate with Multiple Colors
- Adding multiple colours with smooth animation makes glownes better.
- Just create an animation using @keyframes to repeatedly set from one color to another.
- From filter: hue-rotate(0deg); to filter: hue-rotate(360deg); sets different colors to the box-shadow and text-shadow.
- Animate it for few seconds infinitly.
Implementation of Animate with Multiple Colors as follows.
CSS
Copy
#apple, #twitter, #github, #facebook{
animation: animate 3s linear infinite;
}
@keyframes animate{
from{
filter: hue-rotate(0deg);
}
to{
filter: hue-rotate(360deg);
}
}
#twitter{
animation-delay: 0.5s;
}
#github{
animation-delay: 1s;
}
#facebook{
animation-delay: 1.5s;
}
That's all!. You have successfully done "Glowing Animation Effect".
Comments
Post a Comment