<link href='https://fonts.googleapis.com/css?family=Lobster+Two:400,700' rel='stylesheet' type='text/css'> 
 <div id="box">
  <div id="tile01">
    <div id="mask">Water</div>
  </div>
  </div>

body{margin:0px; background-color:#424344;}

#tile01
{
   margin: auto;
   width:200px; height:100px; 
 }

#mask
{
  position:relative;
  top:5px;
  margin:auto;
  width:200px; height:100px; 
 
  font-size:60px;
  font-weight:700  ;
  font-family: 'Lobster Two', cursive;
  text-align:center;
  line-height:90px;
   text-shadow: 0px 2px 2px  rgba(0,0,0,0.2), 0px 2px 0px rgba(255,255,255,0.3);

 background-image:-webkit-radial-gradient(center 10px,80px 100px, #111111 50%, #0099ff 51%);
   
background-size:40px 110px;  
 
-webkit-background-clip: text; 
-webkit-text-fill-color: transparent; 
-webkit-animation-name: wave-animation; 
-webkit-animation-duration: 3s ;  
-webkit-animation-iteration-count:infinite; 
-webkit-animation-timing-function: linear ; 
}

@-webkit-keyframes 'wave-animation'
{ 
 0% {background-position:200px 10px;}
 50% {background-position:100px -20px;}
100% {background-position:0px -40px;;}
}

#box{
margin: 100px auto;
width:200px; height:100px;
border-radius:20px;
border:5px solid #111111;
      background-image:-webkit-linear-gradient( 45deg ,  0%,  100%);
opacity:0.95;
box-shadow:0px 2px 0px #ffe8a;

}