YouTip

# SVG Blur Effect The blur effect in SVG can be achieved using the `` element, which applies the Gaussian blur algorithm to images. Blur effects can be used to create soft shadows, depth-of-field effects, blurred backgrounds, and various other visual effects. ### `` Element: The `` element is used to apply Gaussian blur to an image. It has two main parameters: * `stdDeviation`: Specifies the standard deviation for the Gaussian blur. The larger the standard deviation, the more intense the blur. You can use one or two numbers, representing horizontal and vertical standard deviations respectively. If only one number is provided, both horizontal and vertical standard deviations are the same. * `in`: Specifies the input image, usually `SourceGraphic`, meaning the target element itself to which the filter effect is applied. The following code defines a blur filter and applies it to a red-filled rectangle, creating a blurred appearance. `stdDeviation="5"` means the standard deviation is 5 in both horizontal and vertical directions, resulting in a blur of 5 pixels. ## Example ### Example 1 The `` element is used to create a blur effect:  Below is the SVG code: ## Example [Try it Yourself »](#) Click to view: (#). **Code Explanation:** * The `id` attribute of the `` element defines a unique name for the filter. * The `` element defines the blur effect. * `in="SourceGraphic"` specifies that the effect is created from the entire graphic. * The `stdDeviation` attribute defines the amount of blur. * The `filter` attribute of the `` element links the element to the "f1" filter. ### Notes * The blur effect can be applied to any SVG graphical element, including rectangles, circles, paths, etc. * The `stdDeviation` parameter can be adjusted as needed to achieve the desired level of blur. * The blur effect can be combined with other filter effects, such as shadows, blending modes, etc. By using the `` element, you can add a blur effect to SVG graphical elements, giving them a soft, blurred appearance and enabling various visual effects.