CSS3 Text Shadow Generator

Use this CSS3 text shadow generator to easily add text shadow styles into your web project.

Your browser does not support the CSS3 text-shadow property. You can still use this tool to generate the CSS3 rule, but you won' be able to see the results.

Look Ma, No Images!

|
deg
px
px
r
g
b

Generated CSS:

Text Shadow Explained

The CSS3 text-shadow property is one of the most popular techniques of progressively enhancing the design of a website. Although it was originally in the CSS 2.1 specification, it was withdrawn due to lack of support. However it is now back in CSS 3 and has widespread support amongst modern browsers.

The text-shadow property is really simple to use. The syntax is as follows:

It takes four values: the first value defines the distance of the shadow in the x (horizontal) direction, the second value sets the distance in the y (vertical) direction, the third value defines the blur of the shadow and the last value sets the colour.

While this is relatively easy to remember compared to other CSS3 rules such as border-radius, it is useful to have a generator such as this so that you can generate your text-shadow in real time and fine tune it with Photoshop-like controls.


Supporting Browsers

At the time of writing the following browsers support the CSS3 text-shadow property:

Browser Supports text-shadow?
Firefox 3.1+ Full Support
Firefox 1-3 No
Safari 4+ Full Support
Safari 3.1+ Partial Support
Chrome 2+ Full Support
Chrome 1 No
IE9 Full Support
Opera 9.5+ Full Support