Saturday, January 25

CSS Moving Glow Border Animation

CSS Moving Glow Border Animation. Amination is the sequence of movements. We can also make animation using CSS. This tutorial I am going to make border animation using HTML and CSS. If you want to make animation using CSS you have to well know about CSS. I am trying to show you how CSS plays a vital role in animation. Animation makes the website more lively and attractive. Please copy the given source code and paste into your text editor and run it in your browser.  



<!DOCTYPE html>
<title> CSS Moving Glow Border Animation</title>
<link rel ="stylesheet" href ="style.css">
<div class="block moving-glow"></div>


body {
	margin: 0;
	padding: 0;
	background-color: #000;

.block {
	position: relative;
	margin: 10% auto 0;
	width: 50%;
	height: 400px;
	background: linear-gradient(0deg, #000, #272727);

.moving-glow:before, .moving-glow:after {
	content: '';
	position: absolute;
	left: -2px;
	top: -2px;
	background: linear-gradient(45deg, #fb0094, #0000ff, #00ff00,#ffff00, #ff0000, #fb0094, 
		#0000ff, #00ff00,#ffff00, #ff0000);
	background-size: 400%;
	width: calc(100% + 10px);
	height: calc(100% + 10px);
	z-index: -1;
	animation: anim-moving-glow 20s linear infinite;

@keyframes anim-moving-glow {
	0% {
		background-position: 0 0;
	50% {
		background-position: 400% 0;
	100% {
		background-position: 0 0;

.moving-glow:after {
	filter: blur(30px);

Leave a Reply

Your email address will not be published. Required fields are marked *