CSS Gradients on text

dabblet.css

/**
 * CSS Gradients on text
 * http://girliemac.com
 * @girlie_mac
 */
 body {
     font-family: 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, sans-serif;
     color: #666;
 }
 h1, h2 {
     font-weight: normal;
 }
.icon {
    position: relative;
 }
.icon:after {
    position: absolute;
    top: 0;
    left: 0;
}
.icon {
    font-size: 100px;
    line-height: 1.1em;
}
.icon::after {
    content: attr(title);
    color: #fff;
    -webkit-mask-image: -webkit-linear-gradient(-60deg, rgba(0,0,0,0.25) 45%, rgba(0,0,0,0.1) 46%,rgba(0,0,0,0));
}

.red {
    color: red;
}
.blue {
    color: DarkBlue;
}
.orange {    
    color: Orange;
}
.sky {    
    color: DodgerBlue;
}
.gray {    
    color: Gray;
}
.green {
    color: ForestGreen;
}
.pink {
    color: DeepPink;
}

.icon {
    display: inline-block
}

dabblet.html

<!-- I got the idea from: http://d.hatena.ne.jp/kudakurage/20111113/1321170623 for the idea -->
<h1> Unicode Icons</h1>


<div>
<div class="icon sky" title="❄">❄</div>
<div class="icon gray" title="☁">☁</div>
<div class="icon blue" title="☂">☂</div>
<div class="icon orange" title="☀">☀</div>
<div class="icon sky" title="☃">☃</div>
</div>

<h2>Unicode 6</h2>


<div>
<div class="icon green" title="🌿">🌿</div>
<div class="icon blue" title="🌏">🌏</div>
<div class="icon sky" title="💬">💬</div>
<div class="icon blue" title="💾">💾</div>
<div class="icon red" title="㊙">㊙</div>
<div class="icon gray" title="🐼">🐼</div>
<div class="icon red" title="〠">〠</div>
<div class="icon orange" title="😸">😸</div>
<div class="icon green" title="🐢">🐢</div>
<div class="icon orange" title="🐥">🐥</div>

</div>

settings.json

{"view":"split-vertical","seethrough":"","prefixfree":"1","page":"html"}