Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

CSS 3 text shadow in IE

CSS 3 text shadow in IE


I'm using CSS 3 text Shadow to simulate bevel and emboss effect in my web app. The problem is IE 10 shows very bad looking shadow. I didn't checked it on IE 9 still now. But Can it be fixed? This is the CSS I'm using ::

text-shadow: 0px 1px 1px #A4A4A4;
filter: dropshadow(color=#A4A4A4, offx=0, offy=-1);

Is there any javascript library to show text shadow in IE? or any other tricks that will help me? Or any extra CSS properties to add to solve this?

Problem courtesy of: Mazhar Ahmed


You could try the other shadow Filter.

.shadow {
    /* For IE 8+ */
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
    /* For IE 5.5 - 7 */
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');

Or use a behaviour file that simulates CSS3:

Update: Sorry, I misread, that Shadow Filter is for box-shadow, not text-shadow. Internet Explorer does not suppurt text-shadow, but you can simulate this with a drop-shadow and a glow filter, see this tutorial.

Solution courtesy of: Frank van Wijk


View additional discussion.

This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

CSS 3 text shadow in IE


Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription