<!DOCTYPE html>
<html>
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div></div>
</body>
</html>BODY {
background: #EEE;
padding: 30px;
}
DIV {
height: 200px;
background: crimson;
box-shadow: 0 -150px 70px -120px teal inset,
0 -220px 70px -120px yellowgreen inset,
0 -280px 70px -120px gold inset;
border-radius: 30px;
border: 10px solid white;
animation: background 4s infinite alternate;
}
@keyframes background {
50% {
background: darkviolet;
box-shadow: 0 -140px 70px -120px mediumorchid inset,
0 -210px 70px -120px teal inset,
0 -280px 70px -120px plum inset;
}
}