CSS3 Text Shadows and Internet Explorer Filters

How to Use CSS3 Text Shadows and Internet Explorer Filters

Text shadows are one of the really nice capabilities that came along with CSS3 (and secretly a boon for SEO).  They allow designers to eliminate the use of images for headers where you wanted drop shadows to create 3D-looking text, turning what was once spider-unfriendly headers into spider-friendly readable text that makes both designers and SEOs happy.

The text-shadow is supported by current versions of Firefox, Safari, and Chrome. Unfortunately, Internet Explorer is way behind the times with this implementation of CSS3 and requires that you use their proprietary Filters which do not render as nice of effects.

How to Create CSS3 Text Shadows for Firefox, Safari, and Chrome

The quickest way to create the code for your text shadows is to use a generator.  being a visual person, my personal favorite is https://css3generator.com/ since I can see exactly what the code will render like and can tweak away until content without repeatedly uploading a style sheet and refreshing my browser over and over.

Your other option is to write the code yourself.  It’s pretty simple to do since the syntax is very  straightforward:

text-shadow: h-shadow v-shadow blur color;

Possible Parameters:

• h-shadow Required. The position of the horizontal shadow. Negative values are allowed
• v-shadow Required. The position of the vertical shadow. Negative values are allowed
• blur Optional. The blur distance
• color Optional. The color of the shadow. Look at CSS Color Values for a complete list of possible color values

Example:
text-shadow: 1px 1px #CCCCCC;

---

Heading With a Text Shadow

---

How to Create CSS3 Text Shadows for Internet Explorer

Personally, I am not a fan of how the DropShadow fillet for Internet Explorer renders, particularly at small sizes.  I’ve included the code information here for your testing, but personally, I still use conditional statements to substitute images or other text effects for Internet Explorer rather than using this code.

Drop Shadow Filter

The syntax:

filter: dropshadow(color=#, offx=, offy=);

Possible Parameters:

• color Color for the drop shadow effect. Hex value.
• offX Number of pixels shadow is offset in x-axis
• offY Number of pixels shadow is offset in y-axis
• positive Optional. Non-zero value create drop shadow for any non-transparent pixel, false or zero value creates shadow for any transparent pixel in visual object.

Example:
filter: dropshadow(color=#CCCCCC, offx=1, offy=1, Positive=1);

---

Heading With a Text Shadow in IE

---

Shadow Filter

The Syntax:

filter: shadow(color=#, direction=);

Possible Parameters:

• Color Sets or retrieves the value of the color applied with the filter.
• Direction Sets or retrieves the direction that the filter’s effect is offset.
• Enabled Optional. Sets or retrieves a value that indicates whether the filter is enabled.
• Strength Optional. Sets or retrieves the distance, in pixels, that a filter effect extends.

Example:
filter: shadow(color=#CCCCCC, Direction=45);