filter: dropshadow(***);

Browser
  • IE
Type
  • Extension

The dropshadow filter add the drop shadow effect to the element.


#example {
filter: dropshadow(color=red, offx=10, offy=10, positive=true);
}
Attribute Value Explanation
color color code or name the color of the drop shadow
offx number of pixels the horizontal movement of the drop shadow
positive value = right
negative value = left
offy number of pixels the vertical movement of the drop shadow
positive value = lowers
negative value = raises
positive 0 (false) or 1 (true) 0 (false) = creates shadow for transparent pixel
1 (true) = creates shadow for non-transparent pixel
the default is 1 (true)

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
Only the color of the drop shadow

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

<div style="width: 100%; filter: dropshadow(color=red);">
<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: dropshadow(color=red);">
Example text
</div>
Output
Example text
The color and move of the drop shadow

<div style="width: 100%; padding-bottom: 30px; filter: dropshadow(color=#c0c0c0, offx=20, offy=30);">
<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-top: 10px; filter: dropshadow(color=#c0c0c0, offx=-5, offy=-5);">
Example text
</div>
Output
Example text
The positive

<div style="font: bold 170% sans-serif; width: 90%; padding: 5px 10px; filter: dropshadow(color=#c0c0c0, positive=false);">
Example text
</div>
Output
Example text 

<div style="font: bold 170% sans-serif; width: 90%; padding: 5px 10px; filter: dropshadow(color=#c0c0c0, positive=1);">
Example text
</div>
Output
Example text