Drop shadow be a Gradient - CSS Animated Gradient Shadow Effects
Download : Code
index.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css" type="text/css">
<title>Animated Gradient Shadow Effects</title>
</head>
<body>
<div class="shadow"></div>
</body>
</html>style.css
body{
margin: 0;
padding: 0;
background: #000;
}
.shadow{
position: relative;
margin: 200px auto 0;
width: 400px;
height: 250px;
background: linear-gradient(0deg,#000,#262626);
}
.shadow:before,
.shadow:after{
content: '';
position: absolute;
left: -2px;
top: -2px;
background: linear-gradient(45deg, #fb0094,#0000ff, #00ff00,#ffff00,
#ff0000,#fb0094,#0000ff, #00ff00,#ffff00, #ff0000);
width: calc(100% + 4px);
height: calc(100% + 4px);
background-size: 400%;
z-index: -1;
animation: animate 20s linear infinite;
}
.shadow:after{
filter: blur(20px);
}
@keyframes animate {
0%{
background-position: 0 0;
}
50%{
background-position: 300% 0;
}
100%{
background-position: 0 0;
}
}
body{
margin: 0;
padding: 0;
background: #000;
}
.shadow{
position: relative;
margin: 200px auto 0;
width: 400px;
height: 250px;
background: linear-gradient(0deg,#000,#262626);
}
.shadow:before,
.shadow:after{
content: '';
position: absolute;
left: -2px;
top: -2px;
background: linear-gradient(45deg, #fb0094,#0000ff, #00ff00,#ffff00,
#ff0000,#fb0094,#0000ff, #00ff00,#ffff00, #ff0000);
width: calc(100% + 4px);
height: calc(100% + 4px);
background-size: 400%;
z-index: -1;
animation: animate 20s linear infinite;
}
.shadow:after{
filter: blur(20px);
}
@keyframes animate {
0%{
background-position: 0 0;
}
50%{
background-position: 300% 0;
}
100%{
background-position: 0 0;
}
}Download - Code
No comments:
Post a Comment