SVG Drop Shadow Effect

by Online Tutorials Library July 14, 2022

SVG Drop Shadow Effects

In SVG, to show the drop shadow effects, <feOffset> element is used. To do this effect, take an SVG graphic and move it a little bit in the x-y plane.

Example

  <!DOCTYPE html>  <html>  <body>      <svg height=”250″ width=”250″>    <defs>      <filter id=”p1″ x=”0″ y=”0″ width=”200%” height=”200%”>        <feOffset result=”offOut” in=”SourceGraphic” dx=”20″ dy=”20″ />        <feGaussianBlur result=”blurOut” in=”offOut” stdDeviation=”10″ />        <feBlend in=”SourceGraphic” in2=”blurOut” mode=”normal” />      </filter>    </defs>    <rect width=”90″ height=”90″ stroke=”blue” stroke-width=”3″ fill=”purple” filter=”url(#p1)” />    </svg>    </body>  </html>  

Test it Now

Explanation

The id attribute of <filter> defines a unique name for the pattern.
The filter attribute of the <rect> element is used to link the element to the “p1” filter.

Next TopicSVG Gradients

SVG Drop Shadow Effect

SVG Drop Shadow Effects

Example

Explanation

SVG Animation

Data Window in Tableau | Data Types in Tableau

You may also like