Nice flat icon

index.html

<div id="icon">PS</div>
Inspired by <a href="http://dribbble.com/shots/1106177-Something-less-flat">Dribbble</a>

Nice flat icon.markdown

Nice flat icon

Inspired by Dribbble (http://dribbble.com/shots/1106177-Something-less-flat): A nice flat Photoshop icon

Is there a better way to make these shadows?

A Pen by jaflo on CodePen.

License.

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

body {
  background: #34495E;
  color: white;
  font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif;
  text-align: center;
}

a {
  color: white;
}

#icon {
  background: #389adc;
background: -moz-linear-gradient(top,  #389adc 0%, #41a0de 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#389adc), color-stop(100%,#41a0de));
background: -webkit-linear-gradient(top,  #389adc 0%,#41a0de 100%);
background: -o-linear-gradient(top,  #389adc 0%,#41a0de 100%);
background: -ms-linear-gradient(top,  #389adc 0%,#41a0de 100%);
background: linear-gradient(to bottom,  #389adc 0%,#41a0de 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#389adc', endColorstr='#41a0de',GradientType=0 );
  width: 100px;
  height: 100px;
  color: #B7E2FF;
  font-size: 40px;
  line-height: 100px;
  text-align: center;
  /* Again: */
  font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif;
  font-weight: bold;
  border-radius: 2px;
  margin: 50px auto;
  letter-spacing: .05em;
  box-shadow: inset 0 1px 2px rgba(255,255,255,0.3),
              0 0 20px rgba(0,0,0,0.5);
  /* Is there a better way to do this than to hand-code it? */
  text-shadow: 
    1px 1px 0 rgba(36,117,203,1),
    3px 3px 0 rgba(36,117,203,0.9),
    5px 5px 0 rgba(36,117,203,0.8),
    7px 7px 0 rgba(36,117,203,0.7),
    9px 9px 0 rgba(36,117,203,0.6),
    11px 11px 0 rgba(36,117,203,0.5),
    13px 13px 0 rgba(36,117,203,0.4),
    15px 15px 0 rgba(36,117,203,0.3),
    17px 17px 0 rgba(36,117,203,0.2),
    19px 19px 0 rgba(36,117,203,0.1),
    21px 21px 0 rgba(36,117,203,0.08),
    23px 23px 0 rgba(36,117,203,0.06),
    25px 25px 0 rgba(36,117,203,0.04),
    27px 27px 0 rgba(36,117,203,0.02),
    29px 29px 0 rgba(36,117,203,0.0);
}