filter: shadow(***);

Browser
  • IE
Type
  • Extension

The shadow filter add the shadow effect to the element.


#example {
filter: shadow(color=red, direction=135);
}
Attribute Value Explanation
color color code or name the color of the shadow
direction 0 - 315 (45 degree increments) the direction of the shadow
0 = top
45 = right top
90 = right
135 = right bottom
180 = bottom
225 = left bottom
270 = left
315 = left top

Example

The original

<img src="image/friend.gif" alt="IMG" width="170" height="140">
<img src="image/friend2.gif" alt="IMG" width="170" height="140">
Output
IMG IMG 

<div style="font: bold 170% sans-serif; width: 100%;">
Example text
</div>
Output
Example text
The color and direction of the shadow

<div style="width: 100%; padding-bottom: 10px; filter: shadow(color=red, direction=135);">
<img src="image/friend.gif" alt="IMG" width="170" height="140">
</div>
Output
IMG 

<div style="width: 100%; filter: shadow(color=red, direction=135);">
<img src="image/friend2.gif" alt="IMG" width="170" height="140">
</div>
Output
IMG 

<div style="font: bold 170% sans-serif; width: 100%; padding-bottom: 10px; filter: shadow(color=red, direction=135);">
Example text
</div>
Output
Example text
Only the color of the shadow

<div style="width: 90%; padding-left: 10px; padding-bottom: 10px; filter: shadow(color=#c0c0c0);">
<img src="image/friend.gif" alt="IMG" width="170" height="140">
</div>
Output
IMG 

<div style="font: bold 170% sans-serif; width: 90%; padding-left: 10px; padding-bottom: 10px; filter: shadow(color=#c0c0c0);">
Example text
</div>
Output
Example text