Set Drop Shadow Effect with CSS

Drop Shadow is used to create a shadow of your object at the specified X (horizontal) and Y (vertical) offset and color.

The following parameters can be used in this filter:

Parameter	Description
color	The color, in #RRGGBB format, of the dropshadow.
offX	Number of pixels the drop shadow is offset from the visual object, along the x-axis. Positive integers move the drop shadow to the right, negative integers move the drop shadow to the left.
offY	Number of pixels the drop shadow is offset from the visual object, along the y-axis. Positive integers move the drop shadow down, negative integers move the drop shadow up.
positive	If true, all opaque pixels of the object has a drop shadow. If false, all transparent pixels have a drop shadow. The default is true.

Example

You can try to run the following code to set drop shadow effect:

<html>
   <head></head>
   <body>
      <img src = "/css/images/logo.png"
         alt = "CSS Logo"
         style = "Filter: Chroma(Color = #000000)
         DropShadow(Color = #FF0000,
         OffX = 2,
         OffY = 2, Positive = 1)">
      <p>Text Example:</p>
      <div style = "width: 357;
         height: 50;
         font-size: 30pt;
         font-family: Arial Black;
         color: red;
         Filter: DropShadow(Color = #000000, OffX = 2, OffY = 2, Positive = 1)">CSS Tutorials</div>
   </body>
</html>