Teach with us

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:

Live Demo

<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>
Updated on 27-Jun-2020 12:23:55

0 Views

Tutorials Point

Previous Page Next Page  
Advertisements