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>):

Here is the SVG code:

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>):

Here is the SVG code:

Code explanation:

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

Make the Shadow Black

Now, make the shadow black:

Here is the SVG code:

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:

Here is the SVG code:

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