w3docs logo
  1. Snippets
  2. CSS
  3. How to Create an SVG Drop Shadow

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.

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>
Do you find this helpful?