Shadow effects

dabblet.css

/**
   Shadow effects
   ==============
   
   Multiple text-shadows can be stacked to
   create wonderful, realistic effects.
   
   Oh, and CSS allows for expressiveness too.
   Try zooming in and disabling some shadows!
   
   Background was adapted from
   Rebel @ SubtlePatterns.com.
**/

@import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700,300italic);

body {
  background: url(http://i.imgur.com/BGEARlg.png);
}

h1 {
  font: bold 6em 'Open Sans Condensed';
  text-align: center;
  
  /**
    No color; everything's done with the
    shadows below (top ones go first).
  **/
  
  color: transparent;
  text-shadow:
    
    /* THREE super-blurred glows */
    
      0 0  80px rgba(87,200,255,.2)
    , 0 0 150px rgba(87,200,255,1)
    , 0 0 220px rgba(87,200,255,1)
    
    
    /* TWO bases (color & glow) */
    
    , 0px 2px 8px rgba(87,250,255,.8)
    , 0 0 rgb(0,96,204)
    
    
    /* ONE-pixel highlights */
    
    /* shadows */
    , -1px -2px 0 rgba(0,0,0,.5)
    ,  0px -1px 0 rgba(0,0,0,.7)
    
    /* lights */
    , +1px +1px 0 rgba(255,255,255,.3)
    ,  0px +1px 0 rgba(255,255,255,.7)
    ,  0px  0px 0 rgba(255,255,255,.5)
  
  ;
}

dabblet.html

<h1>Get your own</h1>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split-vertical","fontsize":"80","seethrough":"","prefixfree":"1","page":"css"}