</> Code The Pixel

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)

Popular
CakePHP 4 Print PDF Using CakePDF
May, 17 2020
CakePHP 4 Authentication Using Auth...
May, 14 2020
CakePHP 4 jQuery Date Time Picker
October, 01 2018
CakePHP 4 Export To CSV
May, 29 2020
CakePHP 4 Authentication Using...
May, 11 2020
CakePHP 4 File Upload Using Proffer Plugin
May, 15 2020
CakePHP 4 Find, Sort & Count
June, 02 2020
Share
Sharing Link
Click the icon to share