How to Create an SVG Drop Shadow

Solution with the CSS filter property

In the example below, we have an <svg> element with a class of "shadow" and add a <rect> element inside. For the "shadow" class, we specify the CSS filter property with its "drop-shadow" value. Note that we use a -webkit-prefix with it as well.

Watch a course CSS - The Complete Guide (incl. Flexbox, Grid & Sass)

Example of creating an SVG drop shadow with CSS:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .shadow {
        -webkit-filter: drop-shadow( 4px 4px 3px rgba(0, 0, 0, .7));
        filter: drop-shadow( 4px 4px 3px rgba(0, 0, 0, .7));
      }
    </style>
  </head>
  <body>
    <svg class="shadow">
      <rect x="10" y="10" width="200" height="100" fill="lightgreen" />
    </svg>
  </body>
</html>

Result

Solution with the SVG <feDropShadow> element

To create a drop shadow of an input image, you can use the SVG <feDropShadow> filter primitive, which can be used only within a <filter> element.

Here, you can change the color and opacity of the drop shadow with presentation attributes (flood-color and flood-opacity).

Example of creating an SVG drop shadow with CSS:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg viewBox="0 0 30 10" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <filter id="shadow">
          <feDropShadow dx="0.2" dy="0.4" stdDeviation="0.2" flood-color="blue" />
        </filter>
        <filter id="shadow2">
          <feDropShadow dx="0" dy="0" stdDeviation="0.5" flood-color="green" />
        </filter>
      </defs>
      <circle cx="5" cy="50%" r="4" style="fill:lightgrey; filter:url(#shadow);" />
      <circle cx="15" cy="50%" r="4" style="fill:lightgrey; filter:url(#shadow2);" />
    </svg>
  </body>
</html>