SVG <feOffset> (original) (raw)

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:

Attributes:

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

Example:

html `

SVG Filter

  <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>

Output:

Example: Shadow without blur.

html `

SVG Filter

<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>

Output: