Menu
×
My W3Schools Get Certified Spaces For Teachers Plus Get Certified Spaces For Teachers Plus
   ❮     
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 CYBERSECURITY DATA SCIENCE
     ❯   

SVG Drop Shadow 1

❮ Previous Next ❯

SVG <feDropShadow>

The <feDropShadow> filter is used to create a drop shadow effect on the input graphic:

Sorry, your browser does not support inline SVG.

Here is the SVG code:

Example

<svg height="110" width="110" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="f1">
      <feDropShadow dx="12" dy="14" stdDeviation="1" flood-opacity="0.7"/>
    </filter>
  </defs>
  <rect width="90" height="90" 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 drop shadow effect is defined with the <feDropShadow> element
  • The dx attribute defines the x offset of the drop shadow
  • The dy attribute defines the y offset of the drop shadow
  • The stdDeviation attribute defines the amount of the blur in the drop shadow
  • The flood-opacity attribute defines the opacity of the drop shadow (from 0 to 1)
  • The filter attribute of the <rect> element points the element to the "f1" filter

❮ Previous Next ❯