Glowing Animated Box Using CSS

Asyraf Wahi Anuar - September 29, 2018

Estimated reading time: 57 seconds

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 :)

Cite this article (APA 6th Edition)