Teach with us

Set Drop Shadow Effect with CSS

CSSWeb DevelopmentFront End Technology

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>
raja
Nitya Raut
Published on 30-Apr-2018 08:07:40

Previous Page Print Page Next Page  
Advertisements