SVG <feOffset>

Last Updated : 31 Mar, 2022

The SVG feOffset element is used to create drop shadow effects. To create drop shadow take an SVG graphic (image or element) and move the XY coordinates.

Syntax:

<feDropShadow dx="" dy="" stdDeviation=""/>

Attributes:

dx: defines x offset
dy: defines y offset
stdDeviation: defines standard deviation for the blur operation.

Example:

<html> 
   <title>SVG Filter</title> 
   <body> 
        
      <svg width="400" height="400"> 
        
         <defs> 
            <filter id="filter2" x="0" y="0"
                    width="150%" height="150%"> 
               <feOffset result="offOut" dx="30" dy="30" /> 
               <feGaussianBlur result="blurOut" in="offOut" 
                               stdDeviation="10" /> 
               <feBlend in="SourceGraphic" in2="blurOut" mode="normal" /> 
            </filter> 
         </defs> 
           
         <g> 
            <rect x="50" y="50" width="150" height="150"
            fill="gray" filter="url(#filter2)" /> 
         </g> 
           
      </svg> 
     
   </body> 
</html>

Output:

Example: Shadow without blur.

<html> 
<title>SVG Filter</title> 
<body> 
      
    <svg width="400" height="400"> 
      
        <defs> 
            <filter id="filter2" x="0" y="0" width="150%" height="150%"> 
            <feOffset result="offOut" dx="30" dy="30" /> 
            <feBlend in="SourceGraphic" in2="blurOut" mode="normal" /> 
            </filter> 
        </defs> 
          
        <g> 
            <rect x="50" y="50" width="150" height="150"
            stroke="black" stroke-width="5"
            fill="gray" filter="url(#filter2)" /> 
        </g> 
          
    </svg> 
      
</body> 
</html> 