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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.