SVG Linear Gradients

<defs> and <filter>

All SVG filters are in <defs> element.<defs> element is the abbreviation of definitions, which contains definitions of special elements (such as filters).

<filter> element is used to define SVG filters.<filter> element has a required id attribute to identify the filter. Then the graphic points to the filter to be used.

SVG <feOffset>

Example 1

<feOffset> element is used to create shadow effects. The idea is: first get an SVG graphic (image or element), then slightly move it on the xy plane.

The first example offsets a rectangle (using <feOffset>），then mix the original image on top of the offset image (using <feBlend>）：

This is the SVG code:

<svg height="120" width="120">
  <defs>
    <filter id="f1" x="0" y="0" width="200%" height="200%">
      <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
      <feBlend in="SourceGraphic" in2="offOut" mode="normal" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3"
  fill="yellow" filter="url(#f1)" />
</svg>

Try it yourself

Code Explanation:

• The id attribute of the <filter> element defines the unique name of the filter
• <rect> element's filter attribute links the element to the "f1" filter

Example 2

Now, you can blur the image offset (using <feGaussianBlur>）：

This is the SVG code:

<svg height="140" width="140">
  <defs>
    <filter id="f2" x="0" y="0" width="200%" height="200%">
      <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
      <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
      <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3"
  fill="yellow" filter="url(#f2)" />
</svg>

Try it yourself

Code Explanation:

• <feGaussianBlur> element's stdDeviation attribute defines the amount of blurring

Example 3

Now, set the shadow to black:

This is the SVG code:

<svg height="140" width="140">
  <defs>
    <filter id="f3" x="0" y="0" width="200%" height="200%">
      <feOffset result="offOut" in="SourceAlpha" dx="20" dy="20" />
      <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
      <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3"
  fill="yellow" filter="url(#f3)" />
</svg>

Try it yourself

Code Explanation:

• The in attribute of the <feOffset> element is changed to "SourceAlpha", which uses the Alpha channel instead of the entire RGBA pixel for blurring

Example 4

Now, treat the shadow as a single color:

This is the SVG code:

<svg height="140" width="140">
  <defs>
    <filter id="f4" x="0" y="0" width="200%" height="200%">
      <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
      <feColorMatrix result="matrixOut" in="offOut" type="matrix"
      values="0.2 0 0 0 0 0 0.2 0 0 0 0 0 0.2 0 0 0 0 0 1 0" />
      <feGaussianBlur result="blurOut" in="matrixOut" stdDeviation="10" />
      <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3"
  fill="yellow" filter="url(#f4)" />
</svg>

Try it yourself

Code Explanation:

• <feColorMatrix> The filter is used to convert the colors in the offset image to a color closer to black. All three '0.2' values in the matrix are multiplied by the red, green, and blue channels. Reducing their values makes the color closer to black (black is 0).