Menu
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

SVG Drop Shadow 2


SVG <feOffset>

The <feOffset> filter is also used to create a drop shadow effects The idea is to take an SVG graphic, and move it a little bit in the xy plane.


<feOffset> and <feBlend>

The first example offsets a rectangle (with <feOffset>), then blend the original on top of the offset image (with <feBlend>):

Sorry, your browser does not support inline SVG.

Here is the SVG code:

Example

<svg height="150" width="150" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="f1" width="120" height="120">
      <feOffset in="SourceGraphic" dx="20" dy="20" />
      <feBlend in="SourceGraphic" in2="offOut" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f1)" />
</svg>
Try it Yourself »

Code explanation:

  • The id attribute of the <filter> element defines a unique name for the filter
  • The offset effect is defined with the <feOffset> element
  • The in="SourceGraphic" defines that the effect is created for the entire element
  • The dx attribute indicates the shift along the x axis
  • The dy attribute indicates the shift along the x axis
  • The <feBlend> element combines two graphics together by a certain blending mode
  • The in2 attribute defines the second image to the blending operation
  • The filter attribute of the <rect> element points the element to the "f1" filter


Blur Image with <feGaussianBlur>

Now, the offset image can be blurred (with <feGaussianBlur>):

                                Sorry, your browser does not support inline SVG.

Here is the SVG code:

Example

<svg height="150" width="150" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="f2" width="120" height="120">
      <feOffset in="SourceGraphic" dx="20" dy="20" />
      <feGaussianBlur stdDeviation="10" />
      <feBlend in="SourceGraphic" in2="blurOut" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3"  fill="yellow" filter="url(#f2)" />
</svg>
Try it Yourself »

Code explanation:

  • The stdDeviation attribute of the <feGaussianBlur> element defines the amount of the blur

Make the Shadow Black

Now, make the shadow black:

      Sorry, your browser does not support inline SVG.

Here is the SVG code:

Example

<svg height="150" width="150" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="f3" width="120" height="120">
      <feOffset in="SourceAlpha" dx="20" dy="20" />
      <feGaussianBlur stdDeviation="10" />
      <feBlend in="SourceGraphic" in2="blurOut" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f3)" />
</svg>
Try it Yourself »

Code explanation:

  • The in attribute of the <feOffset> element is changed to "SourceAlpha" which uses the Alpha channel for the blur instead of the entire RGBA pixel

Treat the Shadow as a Color Matrix

Now, treat the shadow as a color matrix with the <feColorMatrix> element:

      Sorry, your browser does not support inline SVG.

Here is the SVG code:

Example

<svg height="150" width="150" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="f4" width="120" height="120">
      <feOffset in="SourceGraphic" dx="20" dy="20" />
      <feColorMatrix type="matrix" values = "0.2 0 0 0 0 0 0.2 0 0 0 0 0 0.2 0 0 0 0 0 1 0"/>
      <feGaussianBlur stdDeviation="10" />
      <feBlend in="SourceGraphic" in2="blurOut" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f4)" />
</svg>
Try it Yourself »

Code explanation:

  • The <feColorMatrix> element is used to change colors based on a transformation matrix
  • The type attribute of the <feColorMatrix> element indicates the type of matrix operation. The keyword matrix indicates that a full 5x4 matrix of values will be defined
  • The value attribute of the <feColorMatrix> element defines the values for the matrix type