<div class="lines"></div>
<div class="tiles" ></div>
<div class="lines-barber"></div>
<div class="balls"></div>
html,body{
  margin:0;
  padding:0;
  height:100%;
}
body{
  width:220px;
  height:220px;
  margin:25% auto 0 auto;
}
div{
  width:100px;
  height:100px;
  margin:5px;
  float:left;
  box-shadow:0px 0px 10px 0px rgba(0,0,0,.2);
  cursor:pointer;
  transition:transform ease-in-out .2s;
}
.lines{
  background-image:linear-gradient(to left, rgba(3, 169, 244, .8) 20px, rgba(8, 175, 253, .8) 0px), linear-gradient(120deg, #e2f5fe, #119e61);
  background-size:40px 100%, 100%;
}
.tiles{
  background-image:linear-gradient(to left, rgba(3, 169, 244, .8) 20px, rgba(8, 175, 253, .8) 0px), linear-gradient(120deg, #e2f5fe, #119e61);
  background-size:10px 10px, 10px 10px;
}
.lines-barber{
  background-image:linear-gradient(110deg, red 40px, #fff 0px, white 90px, red 5px);
  background-size:120px 120px;
  animation:barber linear 1s infinite;
}
@keyframes barber{100%{background-position-x:120px;}}
.balls{
  background:#3dd9c1;
  background-image:radial-gradient(circle, rgba(255,255,255,.2) 15px, transparent 0px), radial-gradient(circle, rgba(255,255,255,.4) 10px, transparent 0px);
  background-size:40px 40px, 80px 80px;
  background-position: 10px 10px, 0px 0px;
  blend-mode:none;
  animation: balls linear 1s infinite;
}
@keyframes balls{100%{background-position:50px 50px, 80px 80px;}}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.