<div><p>7</p><p>7</p></div>
html{
font-family: 'HelveticaNeue-UltraLight', 'Helvetica Neue UltraLight', Roboto, Arial, Sans-serif;
  font-size:138px;
  background:#e9e3dd;
}

div{
  position:relative;
  width:200px;
  height:200px;
  border-radius:30px;
  background:#fcfbfa;
  margin:-100px auto;
  text-shadow: 
    1px 1px 0 rgba(227,218,219,1),
    3px 3px 0 rgba(227,218,219,0.9),
    5px 5px 0 rgba(227,218,219,0.8),
    7px 7px 0 rgba(227,218,219,0.7),
    9px 9px 0 rgba(227,218,219,0.6),
    11px 11px 0 rgba(227,218,219,0.5),
    13px 13px 0 rgba(227,218,219,0.4),
    15px 15px 0 rgba(227,218,219,0.3),
    17px 17px 0 rgba(227,218,219,0.2),
    19px 19px 0 rgba(227,218,219,0.1),
    21px 21px 0 rgba(227,218,219,0.08),
    22px 22px 0 rgba(227,218,219,0.07),
    23px 23px 0 rgba(227,218,219,0.06),
    25px 25px 0 rgba(227,218,219,0.04),
    27px 27px 0 rgba(227,218,219,0.02),
    28px 28px 0 rgba(227,218,219,0.01),
    29px 29px 0 rgba(227,218,219,0.0);
  
  box-shadow:
  1px 1px 0 0 rgba(212,206,200,1),
  2px 2px 0 0 rgba(212,206,200,1),
  3px 3px 0 0 rgba(212,206,200,0.9),
  4px 4px 0 0 rgba(212,206,200,0.9),
  5px 5px 0 0 rgba(212,206,200,0.8),
  6px 6px 0 0 rgba(212,206,200,0.8),
  7px 7px 0 0 rgba(212,206,200,0.7),
  8px 8px 0 0 rgba(212,206,200,0.7),
  9px 9px 0 0 rgba(212,206,200,0.6),
  11px 11px 0 0 rgba(212,206,200,0.5),
  13px 13px 0 0 rgba(212,206,200,0.4),
  15px 15px 0 0 rgba(212,206,200,0.3),
  17px 17px 0 0 rgba(212,206,200,0.2),
  19px 19px 0 0 rgba(212,206,200,0.1),
  21px 21px 0 0 rgba(212,206,200,0.09),
  23px 23px 0 0 rgba(212,206,200,0.07),
  25px 25px 0 0 rgba(212,206,200,0.05),
  23px 23px 0 0 rgba(212,206,200,0.05),
  25px 25px 0 0 rgba(212,206,200,0.05),
  27px 27px 0 0 rgba(212,206,200,0.05),
  29px 29px 0 0 rgba(212,206,200,0.05),
  31px 31px 0 0 rgba(212,206,200,0.05),
  33px 33px 0 0 rgba(212,206,200,0.05),
  35px 35px 0 0 rgba(212,206,200,0.05),
  37px 37px 0 0 rgba(212,206,200,0.05),
  39px 39px 0 0 rgba(212,206,200,0.05),
  41px 41px 0 0 rgba(212,206,200,0.05),
  43px 43px 0 0 rgba(212,206,200,0.05),
  45px 45px 0 0 rgba(212,206,200,0.05),
  47px 47px 0 0 rgba(212,206,200,0.05),
  49px 49px 0 0 rgba(212,206,200,0.05),
  51px 51px 0 0 rgba(212,206,200,0.05),
  53px 53px 0 0 rgba(212,206,200,0.05),    39px 39px 0 0 rgba(212,206,200,0.05);
}

p{
background-image: url('https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQTdWeWNteABnbzguiXSBxmfc8Z8nh_HHoWoK35QL81x4HnpVmgvQ');
  background-repeat: no-repeat;
  background-size: 200% 200%;
  background-position: 100% 100%;
  -webkit-animation: square 3s linear infinite;
  -ms-animation: square 3s linear infinite;
  animation: square 3s linear infinite;
  -webkit-background-clip: text;
  color:transparent;
  width:200px;
  text-align:center;
  line-height:200px;
  position:relative;
}

p:nth-of-type(2){
  text-shadow:none;
  z-index:2;
  position:absolute;
  top:-139px;
  left:-1px;
}

@-webkit-keyframes square {
  0% { background-position: 0 0; }
  25% { background-position: 100% 0; }
  50% { background-position: 100% 100%; }
  75% { background-position: 0 100%; }
  100% { background-position: 0 0; }
}

@-ms-keyframes square {
  0% { background-position: 0 0; }
  25% { background-position: 100% 0; }
  50% { background-position: 100% 100%; }
  75% { background-position: 0 100%; }
  100% { background-position: 0 0; }
}

@keyframes square {
  0% { background-position: 0 0; }
  25% { background-position: 100% 0; }
  50% { background-position: 100% 100%; }
  75% { background-position: 0 100%; }
  100% { background-position: 0 0; }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js