Nothing is for sale here. Freewill tips keep the site running. Want to help? → Tip via Paypal

Text Shadows with CSS

Thanks to CSS3 we can now add a drop shadow to text without creating graphics. In this tutorial you’ll see a basic text shadow, of course, but we’ll go way beyond the basics and explore some seriously creative shadow effects.

There are two basic shadow types, those with a hard edge and host with a soft edge, but lots of creative ways to use them as you'll see throughout this page. Here’s an example of both types:

Hard Edge Soft Edge

The hard edge is basically a repeat of the text, simply offset. The soft edge is also a repeat of the text, but with the edges blurred and a lighter shade of gray.

Here’s the CSS code for the Hard Edge:

Because there are a lot of examples on this page, I'm keeping this simple and only showing the shadow code. In this "hard edge" example, the shadow was offset by 2 pixels horizontally and vertically . The first number is how far the shadow is offset horizontally. The second number is how far the shadow is offset vertically. The third number with the pound sign is the shadow color.

Here’s the CSS code for the Soft Edge:

In the "soft edge" example the first number is how far the shadow is offset horizontally. The second number is how far the shadow is offset vertically. This is different from the previous example: the third number is how much blur the shadow receives. The fourth number with the pound sign is the shadow color.

Since we can use different shades of gray for the shadow, as you probably guessed, we can also use other colors.

Green Shadow Blue on Blue

The Green Shadow code:

The Blue on Blue code:

You can also change the shadow direction.

Light Source from Lower Right

The Light Source from Lower Right code:

Notice the minus sign before the two offset numbers. This is how change the direction of the shadow. Positive numbers move the shadow to the right and down. Negative numbers move the shadow to the left and up.

You can also use zeros, which will allow you to move the shadow straight up, down, or right and left without the diagonal movement. For example, using 0 2px would move the shadow straight down.

Multiple Shadows

The Multiple Shadows code:

Just separate each shadow with a comma.

Embossed Look

The Embossed code:

For this look you want the text color the same as the background color. One shadow is offset just one pixel toward the upper left in a color not much darker than the background, and not blurred at all. The other shadow is more typical, going down toward the right and blurred.

Outline

The Outline code:

The outline is simply a 1 pixel black shadow with no blur set to each side.

Look Ma! Look Pa!

The Look codes:

You can come up with some really crazy stuff experimenting with shadows, but don’t go too…

Just in case someone would want that "crazy" text...

<div style="text-align: center; font-size: 88px; font-weight: bold;">
<span style="color: white; text-shadow: -3px 3px 6px #555;">C</span>
<span style="vertical-align: 7px; color: red; text-shadow: 3px -3px 6px #0000ff;">R</span>
<span style="color: green; vertical-align: -7px; text-shadow: 3px 3px 6px black;">A</span>
<span style="vertical-align: 11px; color: gold; text-shadow: -3px -3px 6px maroon;">Z</span>
<span style="vertical-align: -7px; color: purple; text-shadow: -3px 3px 6px lime;">Y</span>
<span style="color: blue; text-shadow: 3px 3px 6px red; padding-right: 8px;">!</span>
<span style="margin-left: 12px; text-shadow: 0px 0px 8px #000;">:^)</span></div>