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

×

Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail:
sales@w3schools.com

Report Error

If you want to report an error, or if you want to make a suggestion, send us an e-mail:
help@w3schools.com

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Copyright 1999-2024 by Refsnes Data. All Rights Reserved. W3Schools is Powered by W3.CSS.