Skip to content

Instantly share code, notes, and snippets.

Created March 27, 2012 06:19
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
What would you like to do?
CSS Gradients on text
* CSS Gradients on text
* @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
<!-- I got the idea from: for the idea -->
<h1> Unicode Icons</h1>
<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>
<h2>Unicode 6</h2>
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment