SVG Shadow

Note: Internet Explorer and Safari do not support SVG filters!

<defs> and <filter>

All SVG filter definitions on the internet are contained within the <defs> element. The <defs> element is used for defining short elements with special elements (such as filters).

The <filter> tag is used to define SVG filters. The <filter> tag requires the id attribute to specify which filter to apply to the graphic.

SVG <feOffset>

Example 1

The <feOffset> element is used to create a shadow effect. The idea is to take an SVG graphic (image or element) and move it a bit on the xy plane.

The first example offsets a rectangle (with <feOffset>) and then blends the offset image on top (with <feBlend>):

Here is the SVG code:

Example

For Opera users: View SVG file (right-click on the SVG graphic to preview the source).

Code Analysis:

• The <filter> element's id attribute defines a unique name for the filter.
• The <rect> element's filter attribute is used to link the element to the "f1" filter.

Example 2

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

Here is the SVG code:

Example

For Opera users: View SVG file (right-click on the SVG graphic to preview the source).

Code Analysis:

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

Example 3

Now, create a black shadow:

Here is the SVG code:

Example

For Opera users: View SVG file (right-click on the SVG graphic to preview the source).

Code Analysis:

• The <feOffset> element's attribute is changed to "SourceAlpha" to use the shadow in the Alpha channel instead of the entire RGBA pixel.

Example 4

Now, color the shadow:

Here is the SVG code:

Example

For Opera users: View SVG file (right-click on the SVG graphic to preview the source).

Code Analysis:

• The <feColorMatrix> filter is used to transform the offset image to a color closer to black. The '0.2' matrix values are multiplied by the red, green, and blue channels. Reducing these values brings the color closer to black (black being 0).