Glowing Animated Box Using CSS
Asyraf Wahi Anuar
There are few methods to create a glowing effect using CSS. This tutorial will guide you to create a simple box using HTML and CSS. First, create a basic HTML page and save it as index.html.
This tutorial may be outdated
It was last reviewed 4 years ago. Some steps may differ in newer versions.
There are a few methods to create a glowing effect using CSS. This tutorial will guide you to create a simple box using HTML and CSS. First, create a basic HTML page and save it as index.html. The index.html should contain the basic HTML code with the div="glowbox" as shown below:
<!DOCTYPE html>
<html>
<head>
<title>Glowing Animated Box Tutorial</title>
<link rel="stylesheet" type="text/css" href="/style.css">
</head>
<body>
<div class="glowbox"></div>
</body>
</html>Create a CSS file (style.css) with the following code inside it as shown below:
body {
margin: 0;
padding: 0;
background: #656262;
}
.glowbox {
position: relative;
margin: 100px auto 0;
width: 600px;
height: 400px;
background: #ecf0f5;
}
.glowbox:before,
.glowbox:after {
content: '';
position: absolute;
top: -2px;
left: -2px;
background: linear-gradient(45deg,#fb0094,#0000ff,#00ff00,#ffff00,#ff0000,#fb0094,#0000ff,#00ff00,#ffff00,#ff0000);
background-size: 400%;
width: calc(100% + 4px);
height: calc(100% + 4px);
z-index: -1;
animation: animate 20s linear infinite;
}
.glowbox:after {
filter: blur(20px);
}
@keyframes animate {
0%
{
background-position: 0 0;
}
50%
{
background-position: 400% 0;
}
100%
{
background-position: 0 0;
}
}That all, happy coding :)
Did this tutorial help?
220 readers found this helpful
Comments
No comments yet. Questions about this tutorial are welcome here: the answer helps the next reader too.