CSS3 Font Shadows

While reading over typography enhancements in CSS3, I came across a fun article from Design Shack .

As a quick note, you don’t have to use rgba for the color of your shadow but can utilize any of the CSS color methods. However, I find that rgba is the ideal color setting for a shadow because it adds yet another dimension to work with. Not only can you set the position, blur and color of the shadow, you can also set its opacity using the alpha value.

Font Shadows-css3 (2)

Illusion of Inset Text with CSS3

1
2
3
4
5
6
7
8
body {
    background: #222;
}
 
#text h1 {
    color: rgba(0,0,0,0.6);
    text-shadow: 2px 2px 3px rgba(255,255,255,0.1);
}

Font Shadows-css3 (4)

Advanced Inset Text with CSS3

1
2
3
4
5
6
background-color: #666666;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: rgba(255,255,255,0.5) 0px 3px 3px;

Text shadows give you a lot more control than a normal drop shadow without relying on image editing software. This is a huge bonus for someone working on the go that might have an ultrabook without photoshop or fireworks. This is one of the main reasons I love CSS3 and all of the enhancements that they packed into it.

Font Shadows-css3 (1)

Vintage Lettering with CSS3

1
text-shadow: 4px 3px 0px #fff, 9px 8px 0px rgba(0,0,0,0.15);

Font Shadows-css3 (3)

Superhero Lettering (stacked) with CSS3

1
2
3
text-shadow: -10px 10px 0px #00e6e6,
                 -20px 20px 0px #01cccc,
                 -30px 30px 0px #00bdbd;

Like most CSS effects, text-shadows are extremely simple to implement in a basic form but can take on a variety of different forms if you really put some work into them. You can stack these effects to create multiple layers of shadow.