Misc
Hits: 645

Glowing Animated Box Using CSS

View Comments

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. 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;
	}
}


Below is the code publish in codepen.io for your reference:

See the Pen Glowing Animated Box by Asyraf (@Asyraf) on CodePen.

Tags: , , ,