Use this CSS3 text shadow generator to easily add text shadow styles into your web project.
Look Ma, No Images!
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 |
Please support us...
We hope you find CSS3Gen useful.
Like us on Facebook.