Advanced Search Usage Terms Submit Contact
Dynamic Drive CSS Library
 
CSS Library
Submit an original CSS code
CSS Layouts
Web Graphics
Online Tools:

Advertise Here

CSS Library: CSS3 demos: Here

CSS3 Text Shadows

CSS3 throws its full weight behind text shadows, which as the name suggests, lets you add shadows to regular text on the page. And with support for multiple shadows simultaneously applied to the same text, CSS text shadows can produce some stunning textual effects without images. The following is the syntax for CSS3 text shadows:

text-shadow: <offsetx> <offsety> <blur-radius>* <color>*

Whereby:

Note: Values with asterisks following them (*) denote they are optional.

Here are a couple of very basic examples:

Basic Shadow:

Dynamic Drive

text-shadow: 5px 5px 0 #959595;

Blurred Shadow:

Dynamic Drive

text-shadow: 5px 5px 7px #959595;

Shadow with text color set to match closely the document's background color:

This example sets the color of the text to match closely the document background's color (white in this case), causing the shadow to define the outer edges of the text.

Dynamic Drive

color: #f2f2f2;
text-shadow: 5px 5px 3px #414141;

Inset (aka Letterpress) Text Shadow:

This example sets out to create inset text, or text that appears slightly pressed into the background. There are a few ways to achieve the look, but one ways is to define just a y shadow offset (leaving the x shadow offset to 0) while specifying a shadow color that's lighter than the text's font color.

Dynamic Drive

.inset{
text-shadow: 0 -2px 1px #8a8a8a;
}

Here's a more dramatic example done against a dark background:

Dynamic Drive

background:#494949;
color:black;
text-shadow: 0 1px 2px #8a8a8a;

Multiple, Simultaneous text Shadows

Multiple text shadows can be applied to the same element simultaneously, which can make for some interesting effects. To add multiple text shadows to an element, just separate each text shadow definition with a comma within the same text-shadow property, for example:

Dynamic Drive

text-shadow: 5px 5px 0 red, -5px -5px 0 orange;

The point of the above example is just to highlight how two shadows (or more) can be simultaneously added to a text element, each with its own offsets and color. With that said, lets see a couple of more compelling multiple text shadow examples.

3D looking Text Shadow:

In this example, multiple shadows of the same color are added to a text element, each shadow offset a few pixels more compared to the previous. This creates the illusion of 3D looking text:

Dynamic Drive

color: #12c911;
text-shadow: 1px 1px black, 2px 2px #149c14, 3px 3px #149c14, 4px 4px #149c14, 5px 5px #149c14, 6px 6px #149c14, 7px 7px #149c14, 8px 8px #149c14;

Notice how the very first shadow's color is set to black, to give the text a nice outline.

Glowing Text Shadow:

You can create "glowing text" by using multiple text shadows that do NOT offset at all from the foreground text, essentially hiding behind the text. By gradually increasing the blur strength of each compounding shadow plus darken its color, you create the "glow" effect:

Dynamic Drive

background:black;
text-shadow: 0 0 5px #FFFFA0, 0 0 10px #FFFF4D, 0 0 15px #FFFF41, 0 0 20px #FFFF2A, 0 0 25px #FFFF2B, 0 0 30px #FEFE00, 0 0 35px #F7F700;

Amazing what some seemingly simple text shadows can do!

<--reserved-->
Code Info

Rate this code:

Date Posted: 01/27/2011

Revision History: None

Usage Terms: Click here

Your Comments (4)

Got a question or need help customizing this CSS code? Post it in the CSS Forums. If you have a comment or suggestion instead, post it in the comments section below.

Comment Pages 1 of 1 pages

do you have code so the shadows will show in IE9 or earlier?

thanks
Posted by Bill Burge on 01/29, 11:31 AM
Very good tutorial - one of the clearest I have seen.
Posted by Phil on 02/02, 02:24 AM
thank you for the blur code :) simply and work well.
Posted by Tet on 02/02, 05:57 PM
I love the green one and the red/orange/black one. I'm new to this, and I'm wondering if there is any way to change the colors? Thanks!
Posted by psychiatrist on 02/03, 08:32 PM

Comment Pages 1 of 1 pages


Commenting is not available in this weblog entry.
Copyright 2006-2014 Dynamic Drive Read our Usage Terms before using any of the CSS codes.