<div class="box-shadow"></div>
html {
width: 100%;
height: 100%;
background-image: -webkit-radial-gradient(ellipse farthest-corner at center top, #9ab1c7 0%, #1a242f 100%);
background-image: radial-gradient(ellipse farthest-corner at center top, #9ab1c7 0%, #1a242f 100%);
}
.box-shadow{
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
margin: auto;
overflow: auto;
width: 10px;
height: 10px;
background: #202020;
box-shadow:
10px 10px #ffffff,
-10px 0px #ffffff,
10px 0px #ffffff,
0px 10px #ffffff,
0px -10px #ffffff,
10px -10px #ffffff,
-10px 10px #ffffff,
-10px -10px #ffffff,
20px 10px #ffffff,
20px 0px #ffffff,
30px 0px #ffffff,
-20px 10px #ffffff,
-20px 0px #ffffff,
-30px 0px #ffffff,
-10px 20px #ffffff,
10px 20px #ffffff,
-20px -10px #222222,
-20px -20px #222222,
-30px -20px #222222,
-30px -10px #bb3c1a,
30px -10px #222222,
20px -20px #222222,
30px -20px #222222,
20px -10px #bb3c1a,
40px -20px #d7d1d1,
10px -20px #d7d1d1,
-10px -20px #d7d1d1,
0px -20px #d7d1d1,
-40px 0px #d7d1d1,
-40px -10px #d7d1d1,
-30px 10px #d7d1d1,
-20px 20px #d7d1d1,
40px 0px #d7d1d1,
40px -10px #d7d1d1,
30px 10px #d7d1d1,
20px 20px #d7d1d1,
0px 20px #d7d1d1,
-40px -30px #b9b0b0,
-30px -30px #b9b0b0,
-20px -30px #b9b0b0,
-10px -30px #b9b0b0,
0px -30px #b9b0b0,
10px -30px #b9b0b0,
20px -30px #b9b0b0,
30px -30px #b9b0b0,
40px -30px #b9b0b0,
-40px -20px #b9b0b0,
-50px -10px #b9b0b0,
-50px 0px #b9b0b0,
-40px 10px #b9b0b0,
50px -10px #b9b0b0,
50px 0px #b9b0b0,
40px 10px #b9b0b0,
-20px 40px #ffffff,
0px 40px #ffffff,
20px 40px #ffffff,
-40px -40px #182d3c,
-40px -50px #182d3c,
-30px -40px #4e6271,
-30px -50px #4e6271,
-20px -40px #304757,
-20px -50px #304757,
-10px -40px #4e6271,
-10px -50px #4e6271,
0px -40px #304757,
0px -50px #304757,
10px -40px #4e6271,
10px -50px #4e6271,
40px -40px #182d3c,
40px -50px #182d3c,
30px -40px #4e6271,
30px -50px #4e6271,
20px -40px #304757,
20px -50px #304757,
50px -40px #304757,
60px -50px #304757,
60px -30px #304757,
-30px -60px #364b5a,
-20px -60px #1d3546,
-10px -60px #4e6271,
0px -60px #1d3546,
10px -60px #4e6271,
20px -60px #1d3546,
30px -60px #364b5a,
-20px -70px #182d3c,
-10px -70px #364a59,
0px -70px #182d3c,
10px -70px #364a59,
20px -70px #182d3c;
animation: animate 1s linear infinite;
}
@-webkit-keyframes animate {
0% {
box-shadow:
10px 10px #ffffff,
-10px 0px #ffffff,
10px 0px #ffffff,
0px 10px #ffffff,
0px -10px #ffffff,
10px -10px #ffffff,
-10px 10px #ffffff,
-10px -10px #ffffff,
20px 10px #ffffff,
20px 0px #ffffff,
30px 0px #ffffff,
-20px 10px #ffffff,
-20px 0px #ffffff,
-30px 0px #ffffff,
-10px 20px #ffffff,
10px 20px #ffffff,
-20px -10px #222222,
-20px -20px #222222,
-30px -20px #222222,
-30px -10px #bb3c1a,
30px -10px #222222,
20px -20px #222222,
30px -20px #222222,
20px -10px #bb3c1a,
40px -20px #d7d1d1,
10px -20px #d7d1d1,
-10px -20px #d7d1d1,
0px -20px #d7d1d1,
-40px 0px #d7d1d1,
-40px -10px #d7d1d1,
-30px 10px #d7d1d1,
-20px 20px #d7d1d1,
40px 0px #d7d1d1,
40px -10px #d7d1d1,
30px 10px #d7d1d1,
20px 20px #d7d1d1,
0px 20px #d7d1d1,
-40px -30px #b9b0b0,
-30px -30px #b9b0b0,
-20px -30px #b9b0b0,
-10px -30px #b9b0b0,
0px -30px #b9b0b0,
10px -30px #b9b0b0,
20px -30px #b9b0b0,
30px -30px #b9b0b0,
40px -30px #b9b0b0,
-40px -20px #b9b0b0,
-50px -10px #b9b0b0,
-50px 0px #b9b0b0,
-40px 10px #b9b0b0,
50px -10px #b9b0b0,
50px 0px #b9b0b0,
40px 10px #b9b0b0,
-20px 40px #ffffff,
0px 40px #ffffff,
20px 40px #ffffff,
-40px -40px #182d3c,
-40px -50px #182d3c,
-30px -40px #4e6271,
-30px -50px #4e6271,
-20px -40px #304757,
-20px -50px #304757,
-10px -40px #4e6271,
-10px -50px #4e6271,
0px -40px #304757,
0px -50px #304757,
10px -40px #4e6271,
10px -50px #4e6271,
40px -40px #182d3c,
40px -50px #182d3c,
30px -40px #4e6271,
30px -50px #4e6271,
20px -40px #304757,
20px -50px #304757,
50px -40px #304757,
60px -50px #304757,
60px -30px #304757,
-30px -60px #364b5a,
-20px -60px #1d3546,
-10px -60px #4e6271,
0px -60px #1d3546,
10px -60px #4e6271,
20px -60px #1d3546,
30px -60px #364b5a,
-20px -70px #182d3c,
-10px -70px #364a59,
0px -70px #182d3c,
10px -70px #364a59,
20px -70px #182d3c;
}
50% {
box-shadow:
10px 10px #ffffff,
-10px 0px #ffffff,
10px 0px #ffffff,
0px 10px #ffffff,
0px -10px #ffffff,
10px -10px #ffffff,
-10px 10px #ffffff,
-10px -10px #ffffff,
20px 10px #ffffff,
20px 0px #ffffff,
30px 0px #ffffff,
-20px 10px #ffffff,
-20px 0px #ffffff,
-30px 0px #ffffff,
-10px 20px #ffffff,
10px 20px #ffffff,
-20px -10px #222222,
-20px -20px #222222,
-30px -20px #222222,
-30px -10px #ed4e23,
30px -10px #222222,
20px -20px #222222,
30px -20px #222222,
20px -10px #ed4e23,
40px -20px #d7d1d1,
10px -20px #d7d1d1,
-10px -20px #d7d1d1,
0px -20px #d7d1d1,
-40px 0px #d7d1d1,
-40px -10px #d7d1d1,
-30px 10px #d7d1d1,
-20px 20px #d7d1d1,
40px 0px #d7d1d1,
40px -10px #d7d1d1,
30px 10px #d7d1d1,
20px 20px #d7d1d1,
0px 20px #d7d1d1,
-40px -30px #b9b0b0,
-30px -30px #b9b0b0,
-20px -30px #b9b0b0,
-10px -30px #b9b0b0,
0px -30px #b9b0b0,
10px -30px #b9b0b0,
20px -30px #b9b0b0,
30px -30px #b9b0b0,
40px -30px #b9b0b0,
-40px -20px #b9b0b0,
-50px -10px #b9b0b0,
-50px 0px #b9b0b0,
-40px 10px #b9b0b0,
50px -10px #b9b0b0,
50px 0px #b9b0b0,
40px 10px #b9b0b0,
-20px 40px #ffffff,
0px 40px #ffffff,
20px 40px #ffffff,
-40px -40px #182d3c,
-40px -50px #182d3c,
-30px -40px #4e6271,
-30px -50px #4e6271,
-20px -40px #304757,
-20px -50px #304757,
-10px -40px #4e6271,
-10px -50px #4e6271,
0px -40px #304757,
0px -50px #304757,
10px -40px #4e6271,
10px -50px #4e6271,
40px -40px #182d3c,
40px -50px #182d3c,
30px -40px #4e6271,
30px -50px #4e6271,
20px -40px #304757,
20px -50px #304757,
50px -40px #304757,
60px -40px #304757,
60px -40px #304757,
-30px -60px #364b5a,
-20px -60px #1d3546,
-10px -60px #4e6271,
0px -60px #1d3546,
10px -60px #4e6271,
20px -60px #1d3546,
30px -60px #364b5a,
-20px -70px #182d3c,
-10px -70px #364a59,
0px -70px #182d3c,
10px -70px #364a59,
20px -70px #182d3c;
}
100% {
box-shadow:
10px 10px #ffffff,
-10px 0px #ffffff,
10px 0px #ffffff,
0px 10px #ffffff,
0px -10px #ffffff,
10px -10px #ffffff,
-10px 10px #ffffff,
-10px -10px #ffffff,
20px 10px #ffffff,
20px 0px #ffffff,
30px 0px #ffffff,
-20px 10px #ffffff,
-20px 0px #ffffff,
-30px 0px #ffffff,
-10px 20px #ffffff,
10px 20px #ffffff,
-20px -10px #222222,
-20px -20px #222222,
-30px -20px #222222,
-30px -10px #bb3c1a,
30px -10px #222222,
20px -20px #222222,
30px -20px #222222,
20px -10px #bb3c1a,
40px -20px #d7d1d1,
10px -20px #d7d1d1,
-10px -20px #d7d1d1,
0px -20px #d7d1d1,
-40px 0px #d7d1d1,
-40px -10px #d7d1d1,
-30px 10px #d7d1d1,
-20px 20px #d7d1d1,
40px 0px #d7d1d1,
40px -10px #d7d1d1,
30px 10px #d7d1d1,
20px 20px #d7d1d1,
0px 20px #d7d1d1,
-40px -30px #b9b0b0,
-30px -30px #b9b0b0,
-20px -30px #b9b0b0,
-10px -30px #b9b0b0,
0px -30px #b9b0b0,
10px -30px #b9b0b0,
20px -30px #b9b0b0,
30px -30px #b9b0b0,
40px -30px #b9b0b0,
-40px -20px #b9b0b0,
-50px -10px #b9b0b0,
-50px 0px #b9b0b0,
-40px 10px #b9b0b0,
50px -10px #b9b0b0,
50px 0px #b9b0b0,
40px 10px #b9b0b0,
-20px 40px #ffffff,
0px 40px #ffffff,
20px 40px #ffffff,
-40px -40px #182d3c,
-40px -50px #182d3c,
-30px -40px #4e6271,
-30px -50px #4e6271,
-20px -40px #304757,
-20px -50px #304757,
-10px -40px #4e6271,
-10px -50px #4e6271,
0px -40px #304757,
0px -50px #304757,
10px -40px #4e6271,
10px -50px #4e6271,
40px -40px #182d3c,
40px -50px #182d3c,
30px -40px #4e6271,
30px -50px #4e6271,
20px -40px #304757,
20px -50px #304757,
50px -40px #304757,
60px -50px #304757,
60px -30px #304757,
-30px -60px #364b5a,
-20px -60px #1d3546,
-10px -60px #4e6271,
0px -60px #1d3546,
10px -60px #4e6271,
20px -60px #1d3546,
30px -60px #364b5a,
-20px -70px #182d3c,
-10px -70px #364a59,
0px -70px #182d3c,
10px -70px #364a59,
20px -70px #182d3c;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.