Shadow Filter with CSS


Shadow filter is used to create an attenuated shadow in the direction and color specified.

The following parameters can be used in this filter

Parameter
Description
Color
The color that you want the shadow to be.

Direction
The direction of the blur, going clockwise, rounded to 45-degree increments. The default value is 270 (left).

0 = Top
45 = Top right
90 = Right
135 = Bottom right
180 = Bottom
225 = Bottom left
270 = Left
315 = Top left

Example

You can try to run the following code to implement shadow filter −

Live Demo

<html>
   <head>
   </head>

   <body>

      <img src="/css/images/logo.png"
         alt="CSS Logo"
         style="FILTER: Chroma(Color = #000000) Shadow(Color=#00FF00, Direction=225)">

      <p>Text Example:</p>

      <div style="width: 357;
         height: 50;
         font-size: 30pt;
         font-family:
         Arial Black;
         color: red;
         Filter: Shadow(Color=#0000FF, Direction=225)">CSS Tutorials</div>
   </body>

</html>

Updated on: 25-Jun-2020

363 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements