CSS3 Text Shadow Generator

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.

Please enable Javascript to use this page.

Look Ma, No Images!

|

Angle:
deg

Distance:
px

Blur:
px

r

g

b

rgb:

Opacity:

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: