Fire JS Bin - Shadowr

$(function () {
  var refresh = function () {
    var xdel;
    var ydel;
    var css = "";
    var dir = parseInt($('#dir').val());
    var len = parseInt($('#len').val());
    var blur = parseInt($('#blur').val());
    var color = $('#color').val();
    var tcolor = $('#tcolor').val(); // tcolor = Text color
    if ($('#nodir').attr("checked")) {
      dir = null;
      $("#dir").attr("disabled", true);
    } else {
      $("#dir").attr("disabled", false);
    }

$('#color').css('background', color);

if (dir === null) {
      xdel = 0;
      ydel = 0;
    } else {
      xdel = Math.round(Math.sin(dir * Math.PI / 180) * 100) / 100; // deg to radians, sine for x delta, then round for nice code
      ydel = Math.round(Math.cos(dir * Math.PI / 180) * 100) / 100; // deg to radians, cosine for y delta, then round for nice code
    }

for (var i = len; i >= 1; i--) {
      css += (i * xdel) + "px " + (i * ydel) + "px " + blur + "px " + color + ", "
    }
    css = css.substr(0, css.length - 2);
    if (dir === null) {
      filter = "progid:DXImageTransform.Microsoft.Glow(color=" + color + ",strength=" + blur + ")"
    } else {
      filter = "progid:DXImageTransform.Microsoft.Shadow(color=" + color + ",direction=" + ((-dir + 180) % 360) + ",strength=" + len + ")"
    }
    $('#preview').css({
      "text-shadow": css,
      "filter": filter,
      "color": tcolor,
      "zoom": "1"
    });
    $('#code').html("text-shadow: " + css + ";<br/>          color: " + tcolor + ";<br/>          <br/>          /* For IE (may require customation) */<br/>          -ms-filter: " + filter + ";          zoom: 1;");
  };

$('input').change(refresh).keyup(refresh);
  refresh();
});

<html>
  
  <head>
    <title>Shadowr</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  </head>
  
  <body>
    <div id="wrapper">
      <noscript>
        <p>Sorry, mister, but turn on javascript to make this thing work.</p>
      </noscript>
      <h1>Shadowr</h1>
      <p>Abuse text-shadow! Uglify your CSS! Waste CPU! Make awesome effects!</p>
      <p>
        This is a tool to play with text shadows in a way that would be hard to
        write in code, by repeating them.
      </p>
      <p class="label">First, choose the angle your shadow repeats in:</p>
      <p class="field">
        <input id="dir" type="range" min="0" max="360" step="1" value="0" />
      </p>
      <p class="label">
        Or, check this to have it not move as it repeats:
        <input class="inline" id="nodir" type="checkbox" />
      </p>
      <p class="label">Choose how many repeats:</p>
      <p class="field">
        <input id="len" type="range" min="1" max="200" step="1" value="10" />
      </p>
      <p class="label">Blur!</p>
      <p class="field">
        <input id="blur" type="range" min="1" max="50" step="1" value="4" />
      </p>
      <p class="label">Text color:</p>
      <p class="field"><input id="tcolor" type="text" value="white" /></p>
      <p class="label">Shadow color:</p>
      <p class="field"><input id="color" type="text" value="#cccccc" /></p>
      <p id="preview" contenteditable="true">Editable preview</p>
      <p>To use, copy and paste the css properties below:</p>
      <code id="code"></code>
    </div>
  </body>

</html>

body { text-align:center; background:url(background.png); font-family:arial, sans-serif; color:#555 }
#wrapper { text-align:left; width:300px; margin:0 auto; background:white; padding:0 30px 50px }
h1 { font-size:70px; margin-bottom:10px; margin-top:30px; color:#666; text-shadow:-100px -100px #eee, -99px -99px #eee, -98px -98px #eee, -97px -97px #eee, -96px -96px #eee, -95px -95px #eee, -94px -94px #eee, -93px -93px #eee, -92px -92px #eee, -91px -91px #eee, -90px -90px #eee, -89px -89px #eee, -88px -88px #eee, -87px -87px #eee, -86px -86px #eee, -85px -85px #eee, -84px -84px #eee, -83px -83px #eee, -82px -82px #eee, -81px -81px #eee, -80px -80px #eee, -79px -79px #eee, -78px -78px #eee, -77px -77px #eee, -76px -76px #eee, -75px -75px #eee, -74px -74px #eee, -73px -73px #eee, -72px -72px #eee, -71px -71px #eee, -70px -70px #eee, -69px -69px #eee, -68px -68px #eee, -67px -67px #eee, -66px -66px #eee, -65px -65px #eee, -64px -64px #eee, -63px -63px #eee, -62px -62px #eee, -61px -61px #eee, -60px -60px #eee, -59px -59px #eee, -58px -58px #eee, -57px -57px #eee, -56px -56px #eee, -55px -55px #eee, -54px -54px #eee, -53px -53px #eee, -52px -52px #eee, -51px -51px #eee, -50px -50px #eee, -49px -49px #eee, -48px -48px #eee, -47px -47px #eee, -46px -46px #eee, -45px -45px #eee, -44px -44px #eee, -43px -43px #eee, -42px -42px #eee, -41px -41px #eee, -40px -40px #eee, -39px -39px #eee, -38px -38px #eee, -37px -37px #eee, -36px -36px #eee, -35px -35px #eee, -34px -34px #eee, -33px -33px #eee, -32px -32px #eee, -31px -31px #eee, -30px -30px #eee, -29px -29px #eee, -28px -28px #eee, -27px -27px #eee, -26px -26px #eee, -25px -25px #eee, -24px -24px #eee, -23px -23px #eee, -22px -22px #eee, -21px -21px #eee, -20px -20px #eee, -19px -19px #eee, -18px -18px #eee, -17px -17px #eee, -16px -16px #eee, -15px -15px #eee, -14px -14px #eee, -13px -13px #eee, -12px -12px #eee, -11px -11px #eee, -10px -10px #eee, -9px -9px #eee, -8px -8px #eee, -7px -7px #eee, -6px -6px #eee, -5px -5px #eee, -4px -4px #eee, -3px -3px #eee, -2px -2px #eee, -1px -1px #eee; filter:progid:DXImageTransform.Microsoft.Shadow(color=#eeeeee, direction=-36, strength=1000); zoom:1; }
.highlight { background:#e8e82a; background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#d1d126), to(#e8e82a)); background:-moz-linear-gradient(0% 100% 90deg, #e8e82a, #d1d126); color:#6b6b13 }
.label { margin-bottom:5px; margin-top:20px }
.field { margin-top:0 }
input[type=range] { margin-top:-10px }
input { margin:0; text-align:center }
input { padding:10px }
input.inline { display:inline; padding:0; width:auto; }
#preview { font-size:40px; outline:none; position:fixed; left:5%; top:40%; }
input, code { display:block }
input { width:100%; border:1px solid #aaa; color:gray }
code { overflow:auto; padding-bottom:10px; font-size:11px }
::-webkit-scrollbar, ::-webkit-scrollbar-track-piece { background:white }
::-webkit-scrollbar { width:10px; height:10px }
::-webkit-scrollbar-thumb:horizontal { background:#ddd; width:50px }
::-webkit-scrollbar-thumb:vertical { background:#ccc; height: 50px }